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
  • What is deploying?
  • Available deployment services
  1. Workshop: Todo List

Appendix 2: πŸ›° Deploying your app

Here you'll find several options to deploy your app, including instructions.

PreviousAppendix 1: Git and GitHubNextDeploy to Azure Static Web Apps

Last updated 4 years ago

What is deploying?

When you create a project on your computer, you can run and view it only on a browser on the same computer. Eventually, web applications exist on the Web. How do they get there?

One option is that you make sure your computer is always on and connected to the internet, and set up a configuration that allows other computer to access only the files of the web application using your computer's IP address. Then your computer will practically become a server.

You don't want to do this. For many reasons. Here are some of them:

  • You don't want to have your computer always on.

  • You'll have to manage security to avoid attacks on your computer.

  • You'll have to manage possible overflow of requests to view your web app.

Some organizations manage their own servers. However, there's a much more simple and reliable option: The Cloud.

Several companies have gained so much expertise in managing servers, that they now offer to manage servers for others. You don't need to think about the physical computer that holds your data and files. You don't need to worry about secure connections. You don't need to know what software and which version is installed on these computers. You get a service where you can send (upload) the files and configure how to serve them to the users.

You can do much more on Clouds, like setting up functions that run on the server-side instead of the app (for security and performance reasons), saving and managing data in data bases and files in storage, using services such as automated notifications, emails, and even Artificial Intelligence and Machine Learning.

For your web app we'll focus on making it available online. You may find additional related services and instructions in the specific product page, such as setting up your own, custom domain, connecting to a database, and managing users.

Available deployment services

The services listed below allow a simple process for deployment. All of them offer hosting of the web app with global distribution, scalable access, security, and the option to use a custom domain. Additional services that come out of the box are listed.

Please note that this is not a complete list. Contribution of instructions to additional services to this tutorial is welcome! (Please submit a pull request.)

    • Simple authentication with five major providers

    • Authorization

    • Serverless functions (API)

    • Only GitHub account needed

  • Netlify

  • Firebase by Google

Azure Static Web Apps by Microsoft
GitHub Pages