Loopback and create-react-app Developer Tutorial

Recommended snack and song:

Have a lovely bowl of rice pudding while listening to Auto!Automatic!!

Loopback is amazing at REST API Service, and create-react-app is a neat little CLI that generates a solid starting point for a SPA (single page application). But putting them together can be… tricky!

Nevertheless, we’ll give it a shot.

tl;dr: Go clone the repo and change to full-example, it has all of the code in there.

 

What you’ll need to follow along

Let’s clone the repo and install dependencies, plus the create-react-app package:

The server should now be running at http://localhost:3000 and should have a couple of notes already in there for us to play with. (You can go ahead now and stop the server with Ctrl + C).

 

SPA supporting mods to our Loopback instance

First, go ahead and open the server/config.json file, and add indexFile key to the root of the config like so:

When you run the production build, that’s where our front-end app will live as a production-ready app. We want a reference to that. Trust me.

Next up, let’s edit the server/server.js file:

So what we’ve done is included the path package and used it to serve our indexFile config path as a static folder. Pretty simple, right? Next.

For our next modification, we need to tell our client that every request that comes along through /, should resolve to indexFile. We do that through editing server/boot/root.js like this:

In order for us to run both the back-end and front-end in parallel, we need to install a package called concurrently, which will make our lives a lot easier.

And our last bit of work on the back-end side is to add some scripts to our package.json file like so:

First up, we added a prestart step because, before our app runs, we want to make sure we have a client folder to serve as static, so we run a build command on behalf of our react app (I know… we haven’t set up the front-end yet, bear with me); then, we have the start-dev script which runs both our back-end and front-end dev servers at the same time; there’s also the postinstall step, so we also run the install script on behalf of our front-end app when installing our dependencies.

And that’s it for our back-end mods! Easy, right?

 

Let’s create and configure our React app!

Remove the client/README.md file, and call the create-react-app generator on the client directory:

Before running our newly created front-end app, we need to make a minor change and configure it to run in port 3001 instead of 3000, because it would collide with our back-end app.

To do so, we need to add a client/.env file:

One last thing: I encountered a problem with the service worker, where it would take over the routing completely (once the app is served for production/staging environment) and not allow you to query the back-end server. I solved this problem temporarily by commenting out the lines where it’s imported and then registering it in client/src/index.js:

Not entirely happy with this, but for now, it gets the job done.

And that should be it!

 

Playtime!

Just to make sure everything is working, execute:

This should install our dependencies and then try to install the front-end dependencies as well.

Now let’s run the dev servers:

This should launch our back-end server at http://localhost:3000 and should have opened up your browser at http://localhost:3001.

Let’s test if everything connects correctly by modifying the client/src/App.js like so:


 

Yes, I agree: the UI looks terrible like that. But don’t concentrate on that; look at what we’ve accomplished! We have a fully capable React application running inside an instance of another fully capable REST API service.

Pat yourself on the back, go get yourself another bowl of rice pudding and keep learning! You deserve it!

 

Subscribe to our Blog

Daniel Prado
Daniel Prado
Daniel Prado is a Web Development Practice Lead for Gorilla Logic. He previously taught frontend technologies and data structures at some of Costa Rica’s most prestigious universities. Daniel enjoys open water swimming, go-cart racing, and listen to music - especially 80s heavy metal bands.

Deliver off-the-chart results.

WordPress Video Lightbox Plugin