Adding web.config to React projects

You have a react project and you want to deploy it on an Azure App Service which runs IIS or any other IIS powered website. Your react app uses react-router and has some client side URLs in your project.

Step by step you find out that a web.config file with such rewrite rules should be deployed to the Azure App Service. And I will show you 2 ways how you can add a web.config file to your react project and how your file will get to be part of the app bundle.

This is the simple solution and it involves adding the web.config file side by side with your source files and find the way to make it part of the bundle. It will only work for webpack, if you are building with react-scripts you can go the Second way directly.

and this will mark the fact that this file is being used.

3. For webpack we will need to tell it what to do with the web.config file, because if you run at this moment you will get a similar error:

With react-scripts you don’t have any configuration file, so we can’t have that 3rd step where we were using the file-loader. Instead here we will add an additional build step, which allows us to make a better separation between the code and the configuration and deploy. This second way of doing things works both for webpack and react-scripts.

3. This can also be used for webpack, just modify the webConfigPath variable from the copyIISConfig.js file, so it gets copied to the dist folder, instead of the build one.

So now just execute npm run build and inside the output folder (build or dist) you will have the web.config file. And this makes the bundle ready to deploy to an IIS website.

Related posts:

BuzzFeed is one of those magical platforms that has found a way to enter our lives without us having to initially make contact. It does all the chasing and then ropes you in with fun light…