Try Demo
Start typing to search…

Mapping localhost to virtual hosts during development

If you are running your application on localhost, initiating smallcase Gateway's javascript SDK might not work as expected (you might be seeing a CORS error in the browser console). This can happen because the localhost would not out domain whitelist that we maintain.

This guide will help with setting up your local machine such that when you open the whitelisted domain in the browser, the website is actually served by the local web server.

Let's assume that you have whitelisted https://dev.example.com as one of your domains. Your local web server is running as localhost:8080.

Our objective:

Opening https://dev.example.com in a browser should serve the website from localhost:8080

 

Step 1: Adding DNS entry 🤝

This maps domain name to localhost (127.0.0.1)

With this step, we will inform the browser that "when someone hits URL matching dev.example.com, here's the corresponding IP address (127.0.0.1) that you need. Don't do a normal IP lookup with DNS resolver."

Add this entry in your host file (Find file location for your OS) - 127.0.0.1 dev.example.com

📘

Browser often caches the IP address after first IP Lookup for a domain

Make sure to restart the browser after updating the host file.

 
 

Step 2: Running Nginx server 👨‍💻

This routes HTTP request to the local webserver running on port 8080

With this step, we will ask Nginx to proxy requests made to localhost (with a virtual host) and map it to our application port (8080 in our case).

i. Install Nginx ⬇️

We will use Nginx (official website) as a proxy server to route the requests. Here's a quick explainer video - NGINX explained in 100 Seconds

Find the installation guide for your OS here -

ii. Configure Nginx 🛠

Before we start the server, we need to configure Nginx for proper routing.

Open the primary configuration file (nginx.conf)
- All NGINX configuration files are located in the /etc/nginx/ directory. The primary configuration file is /etc/nginx/nginx.conf.

The file will have the following structure -

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
       . . .
}

http {
       . . .
}

Now add following server blocks in HTTP block -

server {
        listen 443; // HTTPS
        server_name dev.example.com;
        access_log /usr/local/var/log/nginx/example.com.access.log  main;
        location / {
            proxy_pass         http://127.0.0.1:8080;
        }
}

server {
        listen 80; // HTTP
        server_name dev.example.com;
        access_log /usr/local/var/log/nginx/example.com.access.log  main;
        location / {
            proxy_pass         http://127.0.0.1:8080;
        }
}

iii. Start Nginx Server 🕹

We are now all set. All you need to do is run the server. The details for which are mentioned in the above mentioned how-to guides.

Starting server:
Mac, Ubuntu - sudo nginx
Windows - run nginx.exe

Stopping server
Mac, Ubuntu - sudo nginx -s stop
Windows - kill the task in task manager

Restarting server
Mac, Ubuntu - sudo nginx -s restart
Windows - kill the task in task manager and start the server again

👍

Awesome, go hit https://dev.example.com in the browser

Your website will be served from localhost:8080.

To verify this, open the network tab and check for the Remote Address in the Headers tab. It should be 127.0.0.0