Use DotEnv to Configure Environment variables

This article is part of the Robots Mall series

Our project will run in two environments: one is the local development environment, the other is the online production environment.

Because the progress of front-end development and back-end development is not exactly the same, when we are developing the front-end project, the back-end colleagues may not be able to provide an online API. At this time, we must make a mock API ourselves to complete the development of the project. In this project, we use the json-server to create an API interface.

When we develop locally, the URL used is:

http://localhost:8080

The online real URL of this project:

https://mockend.com/BytefishMedium/RobotsMall

At this time, there is a problem, how do we use URLs in the project?

For example, when we get the list of robots, if you write:

fetch("http://localhost:8080/robots")

Then this code cannot run after the project is online.

If you write:

fetch("https://mockend.com/BytefishMedium/RobotsMall/robots")

Then this code cannot run during the project development phase.

So how do we resolve this conflict? The most stupid way is to use the http://localhost:8080 during development, and then manually modify the URL to…