Deploying a React Web Application that's created by create-react-app
Introduction
Upon the completion of my React web app that was initially made by create-react-app, I tried to deploy it on Heroku, but it basically seemed a bit difficult. To get some clues for resolving that, as googling has been always the primitive choice, so I did it. Searching resulted in a ton of diverse ideas and methods, including adding some metadata in the package.json, setting a Procfile to incorporating Express server inside the application. Eventually, I learned that those techniques were to some extent antipattern, even so, the core concepts of them were helpful.
The approach in concept
Then, I came up with a method that is perfectly in compliance with the patterns and works pretty well, and I already employed it in my app. In a nutshell, it is to put the server and the client/s — in my case, it was a React web app — into two distinct folders, where the client-folder should displace inside the server-folder. Both folders need to have their own package.json which are different, but interrelated.
Here is a figure of the folder-scheme of my project. As it is shown, the entire client stuff, including folders, necessary files, all in all, are bundled inside the client-folder which itself is inside the main folder beside the server stuff.
The approach in action
Here you can find the content of the two package.json of my project for the sake of explanation of their correlation and how they actually collaborate with each other.
Code Explanation In line 8 of Figure 2
“postinstall”: “cd client && npm install && npm run build”,
What it does is after proceeding inside the client directory, Heroku ought to install all the required dependencies and eventually execute the build function of the React project in order to outcome the final material for the browser which is going to be served.
In the end, I want to share my very basic Express server code that serves the React web app of my project.
Misc.
I used Tailwind CSS framework for the sake of simplicity and modernity and in that manner, I made some changes on the interior — the client application — package.json file.
“prestart”: “postcss ./src/tailwind.css -o ./src/App.css”,
In line 19 of figure 3, I used prestart due to the fact that Node systems are sensitive to keywords like “pre” and “post” and for that reason, I meant performing this line to execute priorly.
In my next blog post, I will talk about Next.js which is another framework that aims to simplify the deployment and enabling the react-developer to quickly create a deployable app with React.
