JavaScript

Start your Angular project using a pre built template

Introduction

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

This is how it will look like:

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

Prerequisites

To complete this tutorial, you will need:

• An app created on Back4App.
  • Note: Follow the New Parse App tutorial to learn how to create a Parse App on Back4App.
• Basic knowledge in Angular.

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/back4app/angular-quickstart/archive/master.zip && unzip master.zip

Step 2 - Download app’s dependencies

1. Install npm in your system.

   Look at the get npm guide for more info.

2. To install the Angular Command Line Interface (CLI) run:

   $ npm install -g @angular/cli
   

3. To compile and enable automatic re-compiles to your app in the project directory run:

   $ ng serve
   

4. Navigate to http://localhost:4200/.

   The app will automatically reload if you change any of the source files.

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. Open your TypeScript environment file at: src/environments/environment.ts.
2. Go to your app Dashboard at Back4App Website and click on Server Settings.
3. Find the “Core Settings” block and click on Settings. The “Core Settings” block looks like this:

   

4. Copy your App Id and Javascript Key, return to your environment.ts file and paste them on it, using the following code:

   1
   2
   3
   4
   5
   6
   export const environment = {
     production: false,
     PARSE_APP_ID: 'YOUR_APP_ID_HERE',
     PARSE_JS_KEY: 'YOUR_JS_KEY_HERE',
     serverURL: 'https://parseapi.back4app.com'
   };
   

Step 4 - Test your connection

1. Run in the project directory:

   $ ng serve
   

2. Navigate to http://localhost:4200/.
3. Wait until the sign up screen appears.
4. Create an example user by filling the Email address and Password fields and clicking on the Sign up button.
5. Login on Back4App Website, find your app and click on Dashboard > Core > Browser > User. If everything works properly, you should find an user at the User class in your Parse Dashboard as follows:

   

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 the 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:

$ ng build --base-href

Then, you need to upload the created dist directory to the Cloud Code. In order to do that, choose one of the following:

• Upload through Back4App Command Line Interface.

  Learn how to do that by clicking here.

• Upload through Back4App visual interface.

  To do that, follow these steps:

  1. Go to your App at Back4App website and click on Server Settings.
  2. Find the “Cloud Code” block and click on SETTINGS. The “Cloud Code” block looks like this:

     

  3. Click on Choose Files and select all the files of the dist directory. Move them to public, then click SAVE, as shown here:

     

  4. Your files will look like this:

     

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 Angular apps.