How to Deploy a ReactJS NodeJS based App on Windows 10

It’s time to discuss the elephant in the room. Can a React.js or Node.js based web application be deployed on Windows for production?

My Answer: YES, absolutely

If you search for help about this topic on the web, you will find very little or no straight-to-the-point guides that explain the whole process in detail.

The reason is that these technologies are relatively new compared to other Web development frameworks like PHP, Django etc. Node.js wasn’t primarily introduced for Web development until recently.

You will find many guides and tutorials on deploying Node based apps on Amazon EC2, Docker, Heroku etc. But what if you need to deploy your MERN stack app on your local Windows 10 machines for your local Intranet network.

That’s where Nginx comes in. Luckily, it is available for Windows as well.

Can I Deploy my MERN stack app on Windows?

The answer is Yes, you can. However, you will need to have the prerequisites installed in your Windows system before you can deploy your app.

Here’s what you need to have installed on your Windows machine:

Assumptions

We will assume that you already have created the production build for your ReactJS NodeJS based web app. You can do it with this command:

npm run build

This will create a “Build” named folder in your Project directory. It will have all the static files including the main index.html file that you will need for deployment.

Assuming you have your build folder ready, we will move ahead with the step-by-step procedure.

Steps:

Step-1: Install Nginx on Windows

First we will install the Nginx web server on Windows 10.

To download the Nginx package for Windows Click Here.

Once you download the zip file, you can place the extracted folder anywhere in your local directory structure. You can put it in your C: drive and the path will be like: C:/nginx.

When you open the folder it should look like this:

Nginx in Windows

Step-2: Change the configuration file

The next step is changing the nginx configurations file in order to allow it to serve your web application’s front-end and reverse proxy for back-end.

To do this, first you need to locate the nginx.conf file in the nginx directory. It’s located in the ‘conf’ folder under the main directory.

Nginx config file location

Open the nginx.conf file and locate the following code which you will need to change:

Server code in config file

Now assuming that you want the server to listen to port 80 (default port) for web browsing, you will need to change the root path of the web application.

Assuming you have your ReactJS application build under the following path:

D:/app/build/

Change the conf file and paste this path in front of the root field.

Nginx front-end root path

Once last thing before you can browse your web app. You need to add reverse proxy for your Node server so Nginx can retrieve the resource from your Node server. Assuming your Node server is running on Port 5000, here’s what you need to insert:

Nginx Back-end Proxy

And you’re done. Now you can go ahead and start Nginx.

Step-3: Start Nginx

Now that all the configuration has been done, you can go ahead and Start Nginx.

First you need to open Command Prompt with Administrative privileges. To do that, you need to right-click on the cmd.exe and click on “Run as Administrator”.

Inside the command prompt, you need to browse to the directory where Nginx.exe is located. Presumably, it’s located in:

C:/nginx/

Go to this location through the command prompt and then type:

Start Nginx

Now go to your Browser and type localhost and press enter. If everything went right, you should be able to see your web application’s index page.

Note:

One thing to note is that whenever you make a change in the nginx.conf file, you need to stop nginx and restart it again through the command prompt.

To stop the Nginx service here’s the command:

nginx -s stop

And then start the service again. If you don’t do that you won’t be able to see the change you did in the configuration file.

And that’s it. See how easy it was to deploy your ReactJS and NodeJS based application locally on your Windows machine.

If it didn’t work out for you then that means you made a mistake while following the process. In which case you should go through it again carefully and make sure all the paths are correct.

Additional Resources

Spread the Word

You May Also Like

About the Author: Umair

Umair specializes in System Administration (Windows, Linux), Network Security, Cyber Security and other Technology areas including Web Development Frameworks (ReactJS, NodeJS, MongoDB). He is passionate about helping people with all sorts of technical problems.

Leave a Reply

Your email address will not be published. Required fields are marked *