Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

How to Deploy React.js + Node.js Express Client & Server FullStack App to Heroku

Posted on January 21, 2023

 

 

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

 

 

JavaScript
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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Recent Posts

  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • Android Java Project to Download Random Image From Unsplash Using OkHttp & Picasso Library & Display it
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme