Welcome folks today in this blog post we will be deploying react.js + node.js and express
client and server full stack app to heroku
. All the steps are shown below.
Get Started
In order to get started you need to make a new directory
called fullstack
as shown below
mkdir fullcrud
cd fullcrud
Now we need to make the frontend
directory where we will be creating the react.js
app as shown below
mkdir frontend
cd frontend
npx create-react-app sampleapp
cd sampleapp
And now you will see the below directory
structure of the react.js app as shown below
Building the React.js App
Now guys the next step is to build the react.js
app so that we can include it inside the node.js and express
app as shown below
npm run build
This will create the build
directory where it will hold the production
ready code which you can deploy to live website as shown below
Making the Backend Express App
Now we will be making the express
app inside the backend app
mkdir backend
cd backend
npm init -y
npm i express
Now you will see the below directory structure of the express app
Now you need to create the public
directory where we will be storing the static
html css and js files
index.js
1 2 3 4 5 6 7 8 9 10 11 |
const express = require("express") const path = require("path") const app = express() app.use(express.static(path.join(__dirname + "/public"))) const PORT = process.env.PORT || 5000 app.listen(PORT) |
Now we need to start the express
app using the below command
nodemon index.js
And now we need to transfer the build
folder contents to the public
folder so that we can show the react.js
app inside the express app as shown below
Now we need to add the start
script inside the package.json
file as shown below
package.json
Now if you open the localhost:5000
inside the browser you will see the react.js
app inside the browser as shown below
Now we need to create the .gitignore
file inside the root directory and add the following line of code
1 |
/node_modules |
Deploying to Heroku
Now first of all download the heorku cli
inside the computer and then inside the command line execute the below commands inside the root
directory
heroku login
Now we will be creating the new heroku
app by giving a new name
to it as shown below