JavaScript

Start your React project using a pre built template

Introduction

In this section you will learn how to get started with a React template and how to connect it to Back4App in 5 easy steps.

At any time, you can test the app built with this tutorial by clicking here.

Prerequisites

To complete this tutorial, you will need:

Step 1 - Get the template

Download the template at our GitHub repository. You can do that using the following command line:

$ curl -LOk https://github.com/templates-back4app/react-integration/archive/master.zip && unzip master.zip

Step 2 - Download app’s dependencies

Navigate to the folder of your project and install all dependencies by running the following command:

cd react-integration-master/ && npm i

Step 3 - Set up app’s credentials

Update the strings values for App ID and JavaScript Key to set up the app’s credentials. Parse JavaScript SDK uses these settings to connect your app to Back4App servers.

  1. Go to your app Dashboard at Back4App Website and click on Server Settings.
  2. Find the Core Settings block and click on Settings. Need help? Take a look at these steps to find your keys
  3. Copy your App Id and Javascript Key and return to your project’s folder.
  4. Go to app’s folder environment.js and paste your keys.

Step 4 - Test your connection locally

  1. Start the project by running npm run start.
  2. Navigate to http://localhost:3000/.
  3. Wait until the login screen appears.
  4. Create an example user by clicking on the register button.
  • The Error 209 invalid season token is also likely to occur when your browser cookies conflict
    with your Parse’s Current Session. To bypass that, clear your browser cookies or open the
    incognito mode of your browser.

Step 5 - Upload your code to Back4App server

To deploy your app with Back4App, you first need to proper build your app. Use the following command to compile and build your app to a dist directory:

$ npm run build

Then, you need to upload the created build directory to the public folder of your Cloud Code. In order to do that, choose one of the options to deploy:

Step 5.1 - Deploy via CLI

To upload through Back4App Command Line Interface, you take a look at these steps.

Step 5.2 - Deploy via Dashboard

In order to upload the code via Back4App visual interface, go to your App’s Dashboard at Back4App website and click on Cloud Code Functions.

Click on +ADD button and select all the files of the build directory. Move them to public and then click SAVE, as shown here:

Verification emails block

Finally, to deploy your app, see the Back4App Web Hosting Tutorial.

It’s done!

At this point, you have learned how to get started with React apps.