How to Use Backendless with ReactJS (Part 4)
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:
- Basic project setup and render Persons List
- Create, update and delete Persons
- Enable Real-Time database
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:
Then unzip the 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.
Here we go, it works. You can test the app I’ve built at this link.
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:
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!