Subscribe rss
Blog categories
All | Backendless features
How to Use Backendless with ReactJS Part 4
April 11, 2019 by Vladimir Upirov

Create a Web App using React and Backendless

In this article, we are going to continue developing our ReactJS web application using Backendless for the backend. This is part 4 of our series, so be sure you’ve read through parts 1-3, linked below:

If you have already read those then read on. Otherwise, we recommend you either read read all of the previous articles and build the app step-by-step, or you can clone the app from this github repository and use this commit as a starting point. Today we will build our app for the first time and deploy it to Backendless Files.

Build App

We will deploy our app as static files into Backendless Files, and the app will be served by a URL like this one:{APP_ID}/{REST_API_KEY}/some/directory/index.html. All app assets and files must be defined with a relative path; you can get more info here. Simply add the key/value pair to the package.json file:

Now run the build npm script command:

A new directory, build , must be created.

Deploy App

Next, let’s archive the build  directory and drag and drop it into Backendless Files:

Drop Build Directory into Backendless Files

Then unzip the  file:

Unzip File

Remove everything from the unzipped directory into the app  folder (I created this folder earlier; you can create it now if you don’t have one). Now copy the link to the index.html  file to the clipboard and paste it into a new browser page.

Copy index.html link from Backendless Console

Here we go, it works. You can test the app I’ve built at this link.

ReactJS Address Book App

Custom Domain

If you’ve got your own domain, you can deploy the app into the web  directory, then go to the Backendless App Setting page and specify the domain there:

Publish ReactJS app to custom web address

In this case, your React app will be served on “”. You can read more about custom domains in the docs.

Thanks for reading and I hope you enjoyed the series!

Share this post
Tweet about this on TwitterShare on FacebookGoogle+