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 buildThis 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:
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.
Open the nginx.conf file and locate the following code which you will need to change:
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.
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:
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:
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 stopAnd 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.
