Creating an Express Backend

Let’s create a project folder for our new application, hello-react, and create a server.js file, which will handle and route web requests. We’ll see that this Express app will serve the React frontend.

mkdir hello-react

cd hello-react touch server.js

Next, copy and paste the following app code into server.js .

hello-react/server.js

You’ll notice that server.js references a client folder, which we’ll create next. The client folder is where our React frontend will live, and the compiled frontend will live in client/build .

Creating the React Frontend

Now that we have our Express server written, we’ll use create-react-app to create a React project from a template. This is quick way of getting a React app started, as it provides a nice abstraction over Webpack, Babel, and some other React requirements.

In our hello-react project folder, run the following command to create a new React project named client .

create-react-app client

Writing a Build Script

Because React apps must be “built” (ex. to compile JSX to Javascript, minify code, etc.), we’ll create a package.json in our root folder, and include our build steps in our npm start command.

Create a package.json file in the root project folder, and copy and paste the following code:

hello-react/package.json

Let’s look at this file more closely. When we deploy this application to Structure, Structure will recursively find all packge.json files and install all Node dependencies. For our backend, the only dependency is express .

Next, Structure will call the npm start command, which will run the build-client script (which compiles the React frontend).

Note that we do not need to manually run npm install anywhere; Structure will do this automatically!

We also have a start-local command. We can call this by running npm run start-local , which will build the frontend, then start the Express server locally on port 8080, instead of the production port, 80. However, you will have to run npm install in this folder and the client folder first, to run the project locally.