How to deploy a react application on an IIS server
In this article I am going to explain how to deploy a single page react app to an IIS server, this is a situation that I came across while working on a project and I hope this will help you If you find yourself in a similar situation.
Let’s start with the basics, IIS stands for (Internet Information Services) and it is a general-purpose webserver developed by Microsoft to serve HTML pages or files, and it runs on windows based systems only. The IIS uses HTTP/HTTPS as its main protocol for communication but is also capable of using SMTP, FTP and others. Microsoft provides a free version of IIS with any version of windows(server or home) called IIS express, this version is intended for developers to test websites and functionalities using the major capabilities of the IIS, but the full version only comes with Windows Server. There is another popular web server called Apache. Here are some of the differences between the two:
- IIS is packaged with Windows while Apache is free and open source.
- While IIS only runs on Windows, Apache can run on almost any operating system, including macOS, UNIX, and Linux (it’s best suited for Linux).
- IIS integrates with other Microsoft offerings, such as .NET and the ASPX scripting language.
- IIS has a help desk to handle most issues while support for Apache comes from the user community.
- The security features of IIS make it a safer option than Apache.
Inside the IIS there is a simple configuration structure, sites, and applications. Sites are the entry point for handling communication, each site has to have its port to listen to, in the case of a website the default ports are 80 for HTTP and 443 for HTTPS. If you create a site on the same port as an existing site, the other site will be stopped for the new site to run. Applications create endpoints within a site, so it is a nice way to reuse a port when you have a limited amount of them, with this technique you can have multiple and different application types from the same site. For example, if you have a site on your IIS pointed to the URL www.example.com, you can have applications created inside that site to run different services like www.example.com/app1 to run an authentication service and www.example.com/app2 to run a token generator and so on without the need of using a different port for each one.
There is also another functionality that allows us to redirect and control both the incoming and outgoing traffic, called URL Rewrite, this is an add-on for the IIS that allows the server to check certain rules and execute actions based on the results of those rules. You can do things as simple as adding parameters to the URL or changing the URL structure completely to make a reverse proxy, where you receive the request on your IIS but redirect it to another URL for linking applications through your server. This add-on has to be downloaded and installed on the machine that the IIS is running. There are two ways of doing it: first is finding the executable from the Microsoft documentation and installing it in the machine. The second way is to look for the Microsoft Web Platform Installer (from the management section of your application home menu) and look for the package there. After installing the IIS window has to be closed and the open again to see the URL rewrite module in the application home menu.
Now that we have talked about the server let’s talk about the application. For building a React application using the single page concept, there is a simple way to create those using the Create React App toolchain that comes with npm. This tool will set up your environment and let you use the latest JavaScript features, providing a smooth developer experience. Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. To use it just run the following command and it will create yours react app with all you need to get going.
In this command the app name is “my-app” and the npm start command is to run the development server. This server keeps watching for all the changes that you make to the code and lets the application in your browser stay updated, but sometimes it gets blocked so if you change something and it doesn’t reflect on the browser the best thing is to restart your development server.
After your application is complete and you are ready to deploy it to production then you have to use the command:
This command will create all the necessary files to run your application without the need for the source code, like you have been doing up to this point, in the build folder, and this folder is the one you deploy to your server, that for the case of this article is going to be an IIS.
If you want to test locally before deploying to the IIS if your build works as it is intended, then you can install a static file server on your machine, the Create React App documentation recommends installing a package called serve that will help with this purpose. To install it just run the following command.
With this, you install the package globally using npm and can use it from the command line. After installing the serve package just run.
Being build the name of the folder where the command generated all the files, if your command uses a different folder this has to be changed. By default serve listens on port 3000 but this can be changed by the -l flag in the command. For a full list of options that you can adjust for serve run:
For deploying inside an application in the IIS (route different than the root in the URL) you have to create the homepage attribute in the package.json of the project and the value is going to be that sub-route that the application has, so for example to deploy a react application inside the app1 IIS application you have to put {…., homepage: “app1/”, ….}, this will configure the react application to understand www.example.com/app1 as its root route.
Now that you have your React application completed and ready to deploy let’s see how to do that for an IIS. Every application created in IIS has a web.config in the root folder for the project, this file tells the IIS of any special configuration and rules that the application will use to work properly.
And that is it, with these basic steps you can get your application running on an IIS. I hope this was helpful and got you interested in the deployment side of the code. Thank you for reading this article, if it was useful or you liked it give it a clap and I invite you to read my other articles.
References
https://www.techtarget.com/searchwindowsserver/definition/IIS
