Todo List Tutorial
Primary version
Primary version
  • Welcome to the ngGirls tutorial!
  • Workshop: Todo List
    • πŸ‘€About
    • #0: πŸ’ƒ Introduction
    • #1: βŒ› Installations
      • a. StackBlitz instructions
    • #2: πŸ…° Angular kicks in
    • #3: πŸ“ Component
    • #4: ✏ A new component
      • a. StackBlitz instructions
    • #5: πŸ’Ό Class
    • #6: πŸ“₯ Property binding
    • #7: πŸ“€Event binding
    • #8: πŸ“Ž Element ref - #
      • a. About
      • b. Explore
      • c. Resources
    • #9: πŸ“‹ The To Do list
    • #10: βž• New component: todo-item
    • #11: β›“ Interface
      • a. StackBlitz instructions
    • #12: πŸ“ŒAdd items
    • #13: 🚧 Refactor App Component
    • #14: πŸ’… Adding Style
    • #15: πŸ”‹ Creating a Service
    • #16: 🎁 Add Items Using the Service
    • #17: πŸ’ΎLocal storage
    • #18: πŸ—‘ Remove item
    • #19: πŸ”˜ Adding a checkbox
    • #21: πŸ’ͺ Enrich the todo-item component
    • Appendix 1: Git and GitHub
    • Appendix 2: πŸ›° Deploying your app
      • Deploy to Azure Static Web Apps
      • Deploy to GitHub Pages
        • a. StackBlitz instructions
    • Appendix 3: Tutorial Extensions
    • Appendix 4: Generating a new project
    • Troubleshooting
      • Installation
  • More Workshops
    • Second workshops - CRUD and HTTP
      • #1 MongoDB
      • #2 Local server
      • #3 http in diagrams
      • #4 POST
      • #5 GET
      • #6 DELETE and PUT
    • Gallery with Rx.js
      • #0: Init photo gallery
      • #1: Observable
      • #2: More interaction! Upload photos
      • #3: Merging Observables
      • #4: Filtering by category
      • #5: Adding photos to category
    • Forms
      • #1: Template-driven forms
      • #2: Reactive forms
      • #3: Form builder
    • NgRx
      • #1: Actions and reducers
      • #2: Store Devtools
      • #3: Implementing actions in app
      • #4: Selectors
    • RxJS
      • Operators
      • Play time!
    • Blog Editor
      • #1 βš™οΈConfiguring firebase
      • #2 πŸ’…Add Angular Material
      • #3 πŸ’…Add Bootstrap
      • #4 🧭Add Navigation
      • #5 ✏️Add Editor
      • #6 βš™οΈConnect Database
      • #6 πŸ’…Add Feed
      • #7 ✏️Edit Post
      • #9 πŸš€Deploy
      • #10 ✏ ️Next Steps
Powered by GitBook
On this page
  • Download the server code
  • Start the server
  1. More Workshops
  2. Second workshops - CRUD and HTTP

#2 Local server

Previous#1 MongoDBNext#3 http in diagrams

Last updated 5 years ago

Now we will set up a service to act as the middle-woman between your ToDo List app and the database, also known as the server. We prepared the code for the server so we can dive in to connecting our ToDo List application quickly.

Download the server code

The server code is available from GitHub. We need to download the files to a new folder in the project folder you created as part of your ToDo List app installations. You may have named your project folder myProjects. Open a terminal (command line window) and navigate to your project folder:

cd the-path-to-your-folder/myProjects

Now we can download the server code using a Git action called clone which makes a copy of the code to your local machine.

Clone the by running this in your command line / terminal:

git clone https://github.com/pelagia123/ngWorkshopsServer.git

You'll see your command line display progress of all the files it copied on your local machine.

Start the server

Using your terminal, navigate into the ngWorkshopsServer folder that automatically created when you cloned the repository by running cd ngWorkshopsServer.

The server has required packages, or dependent pieces of code, it needs to run. This step is automatically taken care of for us by Angular CLI, but for the server code, we have to run this step manually. You can install packages by running this in your command line / terminal:

npm install

We can now pass in the connection string to access the database to the server and start up the server. You will need the connection string with your password replaced for the <password> part.

Windows users - please use GitBash for running the command to start the server.

Start the server by running this in your command line / terminal:

env CONNECTION_STRING="<connection_string_from_MongoDBAtlas_with_your_password>" node server.ts

Verify the server started by navigating to in your browser. If you see "Hello from Express" then the server is running and ready to use by the ToDo List app.

ngWorkshopsServer repository
http://localhost:3000/