Servering React files in Express and Node on Heroku

Asked
Active3 hr before
Viewed126 times

6 Answers

filesreact
90%

Now that the server is set up and is working, let’s proceed towards getting the React app setup.,npm run client will run the React application without starting the server,After doing this, save the file and push the entire project repository to your Heroku application branch.

Pretag
 Pretag team - issue, fix, solve, resolve
88%

Keep them together – Express and React files sit on the same machine, and Express does double duty: it serves the React files, and it also serves API requests. e.g., a DigitalOcean VPS running Express on port 80 ,Put the API behind a proxy – Express and React app files sit on the same machine, but served by different servers e.g., NGINX webserver proxies API requests to the API server, and also serves React static files ,This article will cover how to keep them together. We’ll build the Express server to serve React’s static files in addition to providing an API, and then deploy it to Heroku. Heroku is easy to deploy to and free to get started with.

$ mkdir rando;
cd rando
load more v
72%

The heroku-postbuild script will run when we push our code to Heroku. It will install the npm packages for our client(as well as devDependencies), and then build our React app into static pages. In your server file make sure any of your secrets, API keys, and DB URIs are protected. Simply install the dotenv package as a devDependency and put this at the top of your server.js file.,My app is structured such that my Node.js app contains a subdirectory called client which contains my React app. In the Node.js server’s package.json file make sure the following scripts exist (you will probably have others, but I’m showing only those necessary for deployment).,Lastly, we need to configure our server to serve our static React app. To do this, in our main server file, add the following code after any api routes that exist for your app.

My app is structured such that my Node.js app contains a subdirectory called client which contains my React app. In the Node.js server’s package.json file make sure the following scripts exist (you will probably have others, but I’m showing only those necessary for deployment).

"scripts": {
   "start": "node server.js",
   "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix client && npm run build --prefix client"
}
load more v
65%

This code will take the contents of build folder and If the 'build' folder contains .html file, then Express server will render the contents of that file when we access http://localhost:5000/.,Built on Forem — the open source software that powers DEV and other inclusive communities.,Also remove the import for cors in server.js file and its use.

1. yarn install
2. yarn start
load more v
75%

Run the npm install command in your local app directory to install the dependencies that you declared in your package.json file.,Now that the dependencies are installed and the version of node to use has been specified, the package.json file will look something like this:,The package.json file defines the dependencies that should be installed with your application. To create a package.json file for your app, run the command npm init in the root directory of your app. It will walk you through creating a package.json file. You can skip any of the prompts by leaving them blank.

$ cd node - example
$ npm init
   ...
   name: (node - example)
version: (1.0 .0)
description: This example is so cool.
entry point: (web.js)
test command:
   git repository:
   keywords: example heroku
author: jane - doe
license: (ISC) MIT
   ...
load more v
40%

Inside the root of your folder, create a Procfile(make sure that there is no extension in the file and “P” is capital). It is the Heroku file in which you will define the dynos setting like after uploading the app, how Heroku will start the node js web server.,But these pose a problem while deploying to Heroku. So you have to configure Heroku so that its server can also use those hidden keys.,Deploying a node app on Heroku using CLI is not difficult if you follow my steps. Otherwise, they pose one or other problems especially when it comes to adding build packs and config vars. Here is a quick guide to deploying a node app with environments variables too.

After that, verify it by running the following command (if you are on windows)

heroku - v
load more v

Other "files-react" queries related to "Servering React files in Express and Node on Heroku"