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
- Install
npm
in your system.Look at the get npm guide for more info.
- To install the Angular Command Line Interface (CLI) run:
$ npm install -g @angular/cli
- To compile and enable automatic re-compiles to your app in the project directory run:
$ ng serve
- 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.
- Open your TypeScript
environment file at:
src/environments/environment.ts
. - Go to your app
Dashboard
at Back4App Website and click onServer Settings
. - Find the “Core Settings” block and click on
Settings
. The “Core Settings” block looks like this: - Copy your
App Id
andJavascript Key
, return to yourenvironment.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
- Run in the project directory:
$ ng serve
- Navigate to
http://localhost:4200/
. - Wait until the sign up screen appears.
- Create an example user by filling the
Email address
andPassword
fields and clicking on theSign up
button. - Login on Back4App Website, find your app and click on
Dashboard
>Core
>Browser
>User
. If everything works properly, you should find an user at theUser
class in yourParse 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:
- Go to your App at Back4App website and click on
Server Settings
. - Find the “Cloud Code” block and click on
SETTINGS
. The “Cloud Code” block looks like this: - Click on
Choose Files
and select all the files of thedist
directory. Move them topublic
, then clickSAVE
, as shown here: - Your files will look like this:
- Go to your App at Back4App website and click on
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.