How-tos

React Web and Express API for development and production

Share this post:

It feels like just yesterday that I was writing web applications in Java with JSP’s, Servlets, and JAX-RS API’s all in one application. All the code was in one IDE and one source repository.

We told ourselves that we’re maintaining clear boundaries and isolation between each layer of the application stack, but let’s be honest with ourselves…It didn’t take long for code to become tightly coupled and turn into spaghetti code.

As the requirements for UI applications became more demanding, its technology evolved faster than anyone can imagine. UI’s became their own separate application with its own lifecycle. They can not be restricted by the requirements and constraints of the backend application. This also allows the UI developers to develop independently without having to worry about any server side logic. When they need to communicate with the backend, they do over the network using a REST call.

While it is common practice now to separate your UI application from all other application logic which require a server side code, in this blog I’ll show how you can EASILY set up an environment where the UI and backend applications run as separate applications in your development environment but runs as a single application when deployed to cloud environment like CloudFoundry on Bluemix.

TLDR:

  1. Create REST API application using Express
  2. Create React application using create-react-app inside the Express application
  3. Dev: Run both applications on separate ports and set up react proxy to route API calls to Express server
  4. Prod: Build optimized React application and tell Express to serve the static files.

Why have a different configuration for development and production?
In development, we want to code client side javascript in ES6 and get features like transforming,  compiling on the fly, hot-reloading on change, linting, etc. For production, we want all the js and css assets to be pre-compiled, minified, and bundled to be as small as possible to prioritize the speed of the application.

For our latest application – FitChain – we wanted to build a Single Page Application (SPA) with React and implement the backend REST API using Express. We wanted the backend and frontend separate when doing development, but when we deploy the application to Bluemix, we didn’t want to have multiple applications.

This is what we want:

 

Setting up Development:

Create a Node.js Express application, listen on port process.env.PORT || 3001 and start the server.

 

 

Run your server

$ nodemon server.js

Keep your server running, open another terminal window and create your UI application inside your Express application using create-react-app. create-react-app is the best thing since sliced bread. It sets up everything you need to develop and build a React application with no configuration. You get a lot right out of the box (Webpack, Babel, ESLint) while still being out of your way.

MyAwesomeApp$ create-react-app ui-react

Before we `npm start`, tell React to forward all API requests to our Express server. This can be done by simply adding a proxy field to the MyAwesomeApp/ui-react/package.json (NOT MyAwesomeApp/package.json). This is for development only- React will forward all URL’s it doesn’t know to this proxy.

  “proxy”: “http://localhost:3001/”

Start the React development server:

MyAwesomeApp$ cd ui-react
MyAwesomeApp/ui-react$ npm start

Your browser should automatically open:

Now, let’s add code to call our API from our UI by editing MyAwesomeApp/ui-react/src/App.js

Setting up Production:

For production, we will need to first build our UI. Fortunately, create-react-app gives us everything we need and makes it dead simple. Did I mention create-react-app is awesome yet? From your ui-react folder, run

/MyAwesomeApp/ui-react$ npm run build

The UI is optimized and built to ui-react/build folder ready to be served. Let’s tell our Express server to serve this build folder as static files. (This won’t impact our development flow)

// serve the react app files
app.use(express.static(`${__dirname}/ui-react/build`));

You can test it by visiting your Express server in your Browser at localhost:3001

Let’s deploy this to Bluemix using CloudFoundry. But first, let’s add node_modules directories to the ignore list.

MyAwesomeApp/ui-react$ cd ..

MyAwesomeApp$ echo “node_modules/” > .cfignore

This will tell the Bluemix cli to not push the node_modules directory. Bluemix will run npm install and get these dependencies for us. All that’s left to do is push the app!

MyAwesomeApp$ bluemix app push <UNIQUE_NAME>

That’s it! Now you only have one Bluemix application with your backend API and an optimized UI.

Leave a comment if this helped. To see all this in action, see our FitChain application https://github.com/IBM-Bluemix/health-blockchain

To see all of our other samples, check out https://ibm-bluemix.github.io/

Happy Hacking!

IBM Cloud Technical Offering Manager

More How-tos stories
May 7, 2019

We’ve Moved! The IBM Cloud Blog Has a New URL

In an effort better integrate the IBM Cloud Blog with the IBM Cloud web experience, we have migrated the blog to a new URL: www.ibm.com/cloud/blog.

Continue reading

May 6, 2019

Use IBM Cloud Certificate Manager to Obtain Let’s Encrypt TLS Certificates for Your Public Domains

IBM Cloud Certificate Manager now lets you obtain TLS certificates signed by Let’s Encrypt. Let’s Encrypt is an automated, ACME-protocol-based CA that issues free certificates valid for 90 days.

Continue reading

May 6, 2019

Are You Ready for SAP S/4HANA Running on Cloud?

Our clients tell us SAP applications are central to their success and strategy for cloud, with a deadline to refresh the business processes and move to SAP S/4HANA by 2025. Now is the time to assess, plan and execute the journey to cloud and SAP S/4HANA

Continue reading