Blog

How to Use Backendless with ReactJS (Part 4)

by on April 11, 2019

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 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 in Backendless Console.

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: https://backendlessappcontent.com/{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:

"homepage": ".",

Now run the build npm script command:

npm run build

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 build.zip file:
Unzip Build.zip 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 “http://my-custom-domain.com”. You can read more about custom domains in the docs.

Thanks for reading and I hope you enjoyed the series!

Leave a Reply