Search
  • Budhana Tech, LLP

Setting Up: Todo list App with Loopback 4 and Angular 7 Part 1

Updated: Jan 3, 2019

In this 3 part tutorial series we are going to build a very simple Todo list app with the latest frameworks available for backend and frontend. For backend we will be using Loopback 4 and for frontend we will be using Angular 7.


Please note you will require to have the following

  • Loopback 4 (click this to know how to get it).

  • Angular 7 (click this to know how to get it).


In this part we will just be setting up the base structure of our Todo list app, without waiting anymore lets get our hands dirty.


Looback Part:

Open terminal/console and fire commands in the following sequence to setup the backend

  • "lb4 app"

  • Project name: "todolist-app-webapp-backend"

  • Project description: "a simple todo list app"

  • Project root directory: "todolist-webapp"

  • Application class name: "TodoList",

  • Select features to enable in the project: (keep defaults)

After this your loopback cli will scaffold the app and will out put something like this at the end.


As the cli finishes its work now you can run your loopback project by going into the directory using "cd todolist-webapp-backend" command and then fire the command "npm start", you will see the following output in the terminal which makes sure that you have followed the right setups.


As provided in the screen shot we can go to this link http://127.0.0.1:3000/ping to verify if the app is running.


Angular Part:

Open terminal/console and fire commands in the following sequence to setup the frontend

  • ng new todolist-webapp-frontend

  • Would you like to add Angular routing?: y

  • Which stylesheet format would you like to use?: css

After this your loopback cli will scaffold the app. As the cli finishes its work now you can run your angular project by going into the directory using "cd todolist-webapp-frontend" command and then fire the command "ng serve --open", you will see the following output in the terminal which makes sure that you have followed the right setups.


This will automatically open the angular app in the browser and will display our generated angular app like this.



Congratulations we just created our base backend and frontend for our project and that even without writing single line of code. And this marks the end of our first part "Setting Up".


Please follow along in the second part coming soon to see how we can connect the Frontend and the backend together with an in memory datasource (In the end of this series we will also guide you through the process of connecting an actual database).


Please leave a comment below if you have something wandering around your head, may it be something crazy.


#angular #loopback #MEAN #backend #frontend #todo

Ending with a quote

Do not focus on having most features, focus on making every tiny detail count.
143 views0 comments

Recent Posts

See All