Set Up Fullstack Application Ngrok on the Same Domain for Free

The Story

Sometimes, we want to deploy the local app using the same domain. There are many reasons for this: due to CORS policy, or needing to use the same domain for easily delivering cookies to the server without using any JavaScript code.

Install Ngrok

First, you need to download and install Ngrok. Follow these steps:

• Go to the Ngrok website.
• Sign up for a free account if you don’t have one.
• Install Ngrok following the Ngrok documentation.
• Claim a static domain for free.

Start Your Local Development (Both Frontend and Backend)

Before using Ngrok, ensure your local development server is running. This could be a Node.js server, a Python Flask app, a Ruby on Rails server, etc. For instance, if you’re using a Node.js application, you might start your server like this:

node client.ts

node server.ts

By default, let’s assume your API server is running on http://localhost:3333 and your client server is running on http://localhost:3000.

Install and setup Nginx local

Install Nginx on your local machine using this documentation, or you can search on the internet: Nginx Installation Guide

After installing nginx on your local, we need to setup config file for nginx:

server {
       listen 8888;
       server_name localhost;

       location / {
           proxy_pass http://localhost:3000;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
       }

       location /api {
           proxy_pass http://localhost:3333;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
       }
   }

Connect Ngrok to your local nginx:

Run the following command to start Ngrok and connect it to your local Nginx:

ngrok http --domain=your-static-domain.ngrok-free.app 8888

Ngrok will start after running the above command.

Access Your Application Via Ngrok URL

Now go to https://your-static-domain.ngrok-free.app and you will see the result.