{"id":3574,"date":"2022-10-07T00:32:35","date_gmt":"2022-10-06T19:32:35","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3574"},"modified":"2022-10-07T00:32:37","modified_gmt":"2022-10-06T19:32:37","slug":"how-to-deploy-react-node-js-express-client-server-app-to-heroku","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-deploy-react-node-js-express-client-server-app-to-heroku\/","title":{"rendered":"How to Deploy React, Node.js & Express Client\/Server App to Heroku"},"content":{"rendered":"\n
In this tutorial, I will teach you how to deploy an app that is built using React, Node.js, and Express to Heroku.<\/p>\n\n\n\n
Let’s get started by creating two folders “client” and “server” on your PC. For the sake of this tutorial, we will use these folders to separate our client and server-based code respectively.<\/p>\n\n\n\n
Inside the\u00a0client<\/code>\u00a0folder, create a new\u00a0React.js<\/code>\u00a0app by executing the following command.<\/p>\n\n\n\n
npx create sampleapp<\/pre><\/div>\n\n\n\n
Here\u00a0sampleapp<\/code>\u00a0is the name of the app that we are creating. Now, move inside that folder using the below command.<\/p>\n\n\n\n
cd sampleapp<\/pre><\/div>\n\n\n\n
Now it’s time to build this app using the following code.<\/p>\n\n\n\n
npm run build<\/pre><\/div>\n\n\n\n
Basically, the above command will build out the React.js<\/strong> app and create the build<\/code> folder as shown below.<\/p>\n\n\n\nReact.js build<\/figcaption><\/figure>\n\n\n\n
Now go to the “server” folder and create a new Node.js and Express app by executing the below commands.<\/p>\n\n\n\n
npm init -y<\/pre><\/div>\n\n\n\n
npm i express<\/pre><\/div>\n\n\n\n
After that, create an index.js<\/code> file and copy\/paste the following code into it.<\/p>\n\n\n\n
And now in this code, we are setting the\u00a0public\u00a0directory as the static one to serve files when the user hit the request at the\u00a0home<\/code>\u00a0route. For this, we need to create the\u00a0public<\/code>\u00a0folder inside the root directory.<\/p>\n\n\n\n
Now copy all the files which are present inside the\u00a0build<\/code>\u00a0folder and paste them inside\u00a0public\u00a0folder of the “server” directory.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Now make a\u00a0.gitignore<\/code>\u00a0file and copy\/paste the below line into it.<\/p>\n\n\n\n
\/node_modules<\/pre><\/div>\n\n\n\n
Finally, it’s time to push our code to Heroku. Go ahead by executing the below commands.<\/p>\n\n\n\n
![\"React.js](\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/react_build.jpg\")
![\"\"](\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot_795.png\")
<\/figure>\n\n\n\n