Testing on a local development environment

Sometimes it is helpful to perform visual testing on your local development environment. This can help you identify visual defects early before you commit and push your changes to an external environment. It can also be helpful if you do not have a dedicated external development environment for testing.

The project setup

We have a demo project setup in Trakr with two environments (production/staging). You might have a different setup (e.g. production only or use the local development environment as your production)

Environment setup

 

Our local development environment

We also have our local development environment set up in the URL of localhost/druppio. This subdirectory for my local development means that I have projects with the local URL of localhost/[project_name].

Local environment

Exposing the local development environment

The tool we will use to expose our local development environment is localtunnel. It performs “port forwarding” to expose a socket on your local machine and expose it to the outside world.

There are many other similar tools that perform the same function and please feel to use your favorite tool. We chose localtunnel for its simplicity to set up and no requirement for a signup, etc.

Once you have installed localtunnel, you can type something like the following in your terminal:

Local tunnel command

Some important details in the command that you should be aware of:

  • The option –port refers to the local port that you want to forward. In our example, our local development environment looked like localhost/[project], which means we are using the standard port 80. You might be using 3000, 8080 or other non-standard port in your local development environment.
  • The option –subdomain will generate a URL that looks like [subdomain].localtunnel.me. If you do not put in this option, localtunnel will provide a random subdomain every time.

Accessing your local development environment externally

You can now access your local development environment in the URL generated from the console. Note that WE STILL NEED TO ADD THE SUBDIRECTORY since localtunnel port forwards the entire socket 80 from my local server.

Localtunnel server

Adding your local development environment to the project

The only thing you need to do now is to add this URL to your project settings. Now you can test your local development environment whenever the localtunnel is running!

Project settings

Word of caution

We briefly mentioned it earlier, localtunnel exposes the entire socket of your local machine. This means making sure you take consideration of any sensitive content you might have locally and disable directory listing and other security vulnerabilities.

Localtunnel also tends to time out occasionally due to high traffic volumes. This can interrupt the visual testing process. You can build shell scripts that restart the command or simply build your own localtunnel server.