DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for 4 steps to add a serverless back end to React
Long Nghiem for ScaleDynamics

Posted on • Updated on

4 steps to add a serverless back end to React

In this world, there're two kinds of web developers: those who code front ends, and those who code back ends… (inspired by Mr. Leone 🀠)

You, you want to be a full-stack. But deep in your heart, you know you belong to one of those two kinds. Wherever your natural skills are, this article will help you on the path of the JavaScript full-stack development. Serverless is a nice approach to avoid server management while scaling with virtually no limit. Let’s see how to make it even easier with ScaleDynamics, which spares us the HTTP coding parts on both sides.

In terms of serverless, I guess you already know Vercel β€” that offers static and Jamstack deployment, Serverless Functions, and Global CDN, however, I won’t talk about Vercel but about a newer serverless platform β€” ScaleDynamics which introduces a unique approach to code and deploy back-ends on serverless function (FaaS). It is basically kind of a Vercel for Enterprises β€” because you can deploy it on any cloud, even private clouds, and on-premise β€” with a new approach for developing and coding the APIs.

So without any further ado, let’s get started!

1. Initialize project

First, create your main React project:

npx create-react-app react-warp-tuto
Enter fullscreen mode Exit fullscreen mode

2. Set up ScaleDynamics server

In this step, we will create a Basic HTTP proxy in Node.js in order to:

  • Fetch data from a REST API
  • Filter data to avoid to request too much data as client-side
  • Add random avatars in response (to make the rendered page look prettier ;)

To do so, let’s create a server directory at the root of your main project and initialize a new Node.js project inside it:

mkdir react-warp-tuto/server
cd react-warp-tuto/server; npm init -y
And install the [Axios library](https://www.npmjs.com/package/axios) we need:
npm install axios
Enter fullscreen mode Exit fullscreen mode

Now, here’s the fun part! In the server subproject, we create an index.js in order to create back-end serverless function:

// server/index.js
const axios = require(β€œaxios”);
const getUsers = async () => {
 // fetch users from API
 const { data } = await axios.get(β€œhttps://jsonplaceholder.typicode.com/users");
// Pick attributes and add photo
 return data.map(({ id, name, email, phone, company, address }) => ({
  id,
  name,
  email,
  phone,
  city: address.city,
  work: company.name,
  photo: β€œhttps://randomuser.me/api/portraits/lego/" + (id % 10) + β€œ.jpg”,
 }));
};
// getUsers is the function that you will call from the Front-end
module.exports = { getUsers };
Enter fullscreen mode Exit fullscreen mode

Did you notice that last line of code? That part is very important: it will technically tell ScaleDynamics to turn that function into a serverless function (FaaS) and to host it as a serverless function. Basically, you don’t need to deal with HTTPs, arguments, errors, endpoints… ScaleDynamics will do it all for you.

Then, we create a warp.config.js files to configure ScaleDynamics as follows:

module.exports = {
 // project name in the Warp console (demo is created by default)
 project: β€œdemo”,
 output: {
  format: β€œnode-module”,
  // path to the β€œnode_modules” directory of your main project
  projectPath: β€œ../”,
  // module name to import it in your main project
  name: β€œwarp-server”,
 },
};
Enter fullscreen mode Exit fullscreen mode

Regarding the project name, the ScaleDynamics console will be introduced further.

Thanks to the node-module output format, ScaleDynamics will generate a module named warp-server to be used in the client project. Consider it is a helper module, a stub, to call the server.

3. Setup ScaleDynamics in project

On the server-side, ScaleDynamics comes with a command-line interface to let you start a local emulator, build the project, and deploy it on a cloud.

On the client-side, you only need the Warp engine and the generated helper module to call the server API (this prevents us to make an HTTP call).

Back to our parent project, let’s install these small dependencies:

cd ..
npm install @warpjs/engine
npm install warp npm-run-all β€” save-dev
Enter fullscreen mode Exit fullscreen mode

While it’s running, in package.json, let’s add the server parts in the start and build commands, plus the deploy command-line.

// package.json
β€œscripts”: {
+ β€œpostinstall”: β€œcd ./server && npm install”,
- β€œstart”: β€œreact-scripts start”,
+ β€œstart:client”: β€œreact-scripts start”,
+ β€œstart:server”: β€œwarp start-emulator -w ./server”,
+ β€œstart”: β€œrun-p start:*”,
- β€œbuild”: β€œreact-scripts build”,
+ β€œbuild:client”: β€œreact-scripts build”,
+ β€œbuild:server”: β€œwarp build ./server”,
+ β€œbuild”: β€œrun-s build:server build:client”,
+ β€œdeploy”: β€œwarp deploy β€” asset-dir build/ ./server”,
β€œtest”: β€œreact-scripts test”,
β€œeject”: β€œreact-scripts eject”
},
Enter fullscreen mode Exit fullscreen mode

Finally, to call a serverless function in your code, you have to import the Warp engine once. We recommend to initialize it in the entry point of your main project:

// src/index.js
import β€œ@warpjs/engine”;
Enter fullscreen mode Exit fullscreen mode

Regarding the UI, let’s replace the content of App.css, App.js, and add the Users.js component I prepared.
Let’s have a look through the way the serverless back-end is called in Users.js:

// imports the Warp helper module, to back-end wrapper
import WarpServer from β€œwarp-server”;
// creates an instance of the helper
const { getUsers } = new WarpServer();
// async call to the serverless function
const users = await getUsers();
Enter fullscreen mode Exit fullscreen mode

Then, when the promise is returned, the users state variable is set.

getUsers().then((data) => {
  this.setState({ users: data })
})
Enter fullscreen mode Exit fullscreen mode

We’re all set, let’s test it now 🀞 πŸ™πŸ»

4. Run

As we will deploy our project on the cloud, we first need to authenticate ourselves with a ScaleDynamics platform account. If you do not have one yet, you can request a free trial with this link. It’s free, spam-free, and comes with free credits. When it’s
done, let’s get back to our console to log in:

npx warp login
Enter fullscreen mode Exit fullscreen mode

In the Warp console, there is by default a β€œdemo” project. For new projects, you will just need to create a new one and to use the same name in your warp.config.js β€œproject” attribute.

Let’s run the project now. This command-line will run a serverless emulator for the back end, with ScaleDynamics, and will start a React server as usual.

# run a dev server:
npm run start
Enter fullscreen mode Exit fullscreen mode

The browser window opens itself with our wonderful list of fake users with Lego avatars. Feel free to update the front end or back end without killing your servers, it both supports live-reload 😎

Now let’s kill this local server (Ctrl+C twice) and deploy it on a cloud.

# build and deploy to production
npm run build
npm run deploy
Enter fullscreen mode Exit fullscreen mode

ScaleDynamics deploys the back end on FaaS platform GCP functions (as I write these lines, more options exist though), and the front-end on a Google storage (for the sake of this demonstration).

Your project is now ready!

So, at this step, you get your URL, client, and server which are hosted. Throughout the process, we did not have to deal with any HTTP requests, route, security, endpoints, errors…that saved us lots of headaches and tons of time.

To integrate with other frameworks, you can find a lot of code samples for many use cases in GitHub, I recently recorder a tutorial video for Vue.JS, and you can find step-by-step tutorials for Angular and Vue.js.

I hope you’ve found this tutorial helpful and if you have any questions, don’t hesitate to leave it in the comment section below πŸ™‚

The last article in this series is for Angular, so stay tuned 🀟

Credits

Big thanks to Nicolas Pennec who developed the app we took as an example. He is a JavaScript Expert in ScaleDynamics. He co-organizes RennesJS, a French JavaScript Meetup, so if you come by Brittany you’re more than welcome to join us!

Top comments (0)

Find what you were looking for? Join hundreds of thousands of developers on DEV so you can:

🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content