DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Amplication & Angular: Create the Backend
Michael Solati for Amplication

Posted on • Updated on • Originally published at docs.amplication.com

Amplication & Angular: Create the Backend

Welcome to this tutorial on how to build a full-stack application with Amplication.

What we will do is go step by step to create a Todos application using Angular for your frontend and Amplication for your backend.

If you get stuck, have any questions, or just want to say hi to other Amplication developers like yourself, then you should join our Discord!


Table of Contents

  • Step 1 - Create a New App
  • Step 2 - Create an Entity
  • Step 3 - Create a Role
  • Step 4 - Assign Permissions
  • Step 5 - Build the Backend
  • Step 6 - Run the Backend
  • Step 7 - Wrap Up

Step 1 - Create a New App

Hopefully, you've had the chance to create an Amplication account, but if not, don't fret! Visit https://app.amplication.com/ and you'll be directed to the login screen. Here you can log in to an existing Amplication account, or create one, by signing in with a GitHub account. You should end up at the New App page, but if not you can get to it here.

Click the New App button in the top right corner.

create an Amplication app

Select Start from Scratch and wait a few seconds for the app to be generated. You'll be directed to the application's entities. An entity is equivalent to a collection in a NoSQL database or a table in a relational database.

application entities

By default, a User entity is created for you. This entity will eventually help us handle authentication. But first, let's deal with the backend.

Step 2 - Create an Entity

The main entity will be used to store tasks created by users.

Click Add entity.

add entity

When a New entity modal appears, input Task into the input field and click Create Entity. With the entity created we'll want to define a few fields for task elements.

On the left-hand panel, you'll see the Fields this entity has, and at the very bottom, there will be an option to add a field.

add entity fields

The first field will be Text. Type that into the Add field input and hit enter. The new field will be created and a few options will appear.

text field

Notice a dropdown for the Data Type of this field is set to Single Line Text. That's perfect as it'll be a string input of a task. There are many different data types Amplication can enforce for fields.

The only change that needs to be made here is this will be a required field. Toggle the Required Field switch.

Changes will be automatically saved.

Like before, create a new field called Completed. This field should also be a required field, but we will change the data type. Click the Data Type dropdown and change this field to be a Boolean.

The final field we will need to create should be called UID. This field will be used to relate a task to a user. Mark this as a required field. In the Data Type dropdown select Relation to Entity.

The Related Entity dropdown should appear, select User. A modal asking to create a relation between a Task and a User will appear. Click Create to create the relation. To learn more about entity relations, there's an article on the docs website here.

Step 3 - Create a Role

Amplication allows for granular permission to create, read, update, and delete entries in the different entities of the backend.

User's who will be creating tasks in the Todo app will need to be granted certain permissions to create, read, and update their tasks and prevent them from doing other things.

Click the Roles icon on the left-hand panel.

roles button

Then, much like the properties, we added to the Task entity, create a role called Todo User.

create a new role

Step 4 - Assign Permissions

With a role for users of the Todo app created, we'll want to assign certain permissions to the Todo User role.

Click the Entities icon on the left-hand panel.

entities button

By default, every role has CRUD (create, read, update, and delete) access to every entity. It is important to limit the scope of our Todo users.

Select the User entity from the list of entities, and on the left-hand, panel select Permissions.

Every type of command is granted to All Roles. Users with the User or Todo User role have full access to the User entity. This can be dangerous.

The default admin account created by the backend has the role User, so we don't want to mess with that. What we will eventually do is have it so all new users are assigned the Todo User role, and we will limit their access to certain commands.

Toggle the permissions for each of the entity's commands to Granular and toggle on the User role. Now the only user who can access User accounts will have the User role, which will belong only to the admin account.

users permissions

Return to the Entities page and now select the Task entity. Click Permissions. Toggle the Delete command, to Granular and enable access to the User role. Both Users (the admin) and Todo Users (regular users of the app) will be able to create, read, and update tasks; but only Users will be able to delete tasks.

tasks permissions

Step 5 - Build the Backend

With the new Task entity created, and a relation with User's created. We're now ready to build the backend.

On the right-side panel is the Pending Changes where the changes to Task and User will appear.

pending changes

Click Commit changes & build to finalize the changes as well as to deploy an instance of the backend into a sandbox environment.

On the bottom of the page, there's a status button with the text Preparing sandbox environment.... Clicking that will route you to a log of the backend being dockerized and deployed.

build log

This takes a few minutes, but once complete you can see the backend by clicking the Open Sandbox environment, but we will not be using the sandbox for the Todo app.

Amplication by default creates a secure environment where all requests need to be authenticated. For this use case, we will want to ease some of those protections. Thanks to Amplication's extensibility, we can build on top of everything that was generated for us.

We'll start by downloading the backend. In the bottom right of the page, you'll see a download button. Click that and you'll download a .zip file containing all of the code to run the backend.

download button

Extract the zip file and copy all of the contents (except for the README.md) to the root of the amplication-angular project.

Step 6 - Run the Backend

The admin-ui and server folders generated by Amplication are two new node projects that need to be set up. One thing both will need is their dependencies. In the package.json update the postinstall script:

"postinstall": "npm ci --prefix web && npm ci --prefix admin-ui && npm ci --prefix server"
Enter fullscreen mode Exit fullscreen mode

Open a new terminal and run this command

npm run postinstall
Enter fullscreen mode Exit fullscreen mode

This command will install the dependencies of all the subfolders. Another useful aspect of this command is that if you were to push this project to GitHub and cloned the repo when you run npm install this script will occur after the install to install the dependencies of the subfolders automatically.

Install npm-run-all as a dev dependency as follows:

npm install -D npm-run-all
Enter fullscreen mode Exit fullscreen mode

Update the start script in package.json and add the following script as well:

"start": "npm-run-all -p start:frontend start:backend",
"start:frontend": "npm --prefix web start",
"start:admin": "npm --prefix admin-ui start",
"start:backend": "npm --prefix server start",
Enter fullscreen mode Exit fullscreen mode

We've also set the start to script to run our frontend and backend code at the same time.

Before starting the server there are a few additional steps required. Read server/README.md for directions to:

  • Create a Prisma client
  • Start a database in Docker
  • Initiate the database

When those steps have been completed run the following command:

npm run start
Enter fullscreen mode Exit fullscreen mode

Step 7 - Wrap Up

The frontend of the Todo app will be running at http://localhost:4200/, and the backend will be running at http://localhost:3000/.

Visiting http://localhost:3000/ will greet you with a 404 error. Instead, visit http://localhost:3000/api/ to see all the endpoints of the backend and to see what our REST endpoints will look like.

With our backend created and running locally, we're almost ready to link it to the frontend. First, we'll need to make some additions to the code.

Check back next week for step three, or visit the Amplication docs site for the full guide now!

To view the changes for this step, visit here.

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.