Getting Started

In the root directory of the project...

1. Install node modules yarn install or npm install.
2. Start development server yarn start or npm start.

Next Steps

Adding a New Page

1. Create a folder in /src/app/app-shell with your angular modules.
2. Add a child route for your page to /src/app/*.module.ts.
3. Add a button to the navigation bar in /src/app/app-shell/nav-bar/nav-bar.component.html.

Deployment

If you selected Azure App Service when creating your project, follow these steps:

1. Press Ctrl + Shift + P in Windows/Linux or Shift ⇧ + Command ⌘ + P in Mac and type/select Web Template Studio: Deploy App to start deploying your app.
2. Once the deployment is done, click "Browse website" in the notification window on the lower right corner to check out your newly deployed app.

If you did not select Azure App Service and want to create a new Azure App Service web app, follow these steps:

1. Press Ctrl + Shift + P in Windows/Linux or Shift ⇧ + Command ⌘ + P in Mac and type/select Azure App Service: Create New Web App... to create a new web app.
   • Select your subscription
   • Enter your web app name
   • Select Linux as your OS
   • Select Node.js 10.14 for a Node/Express application, Python 3.7 for a Flask application
2. Press Ctrl + Shift + P in Windows/Linux or Shift ⇧ + Command ⌘ + P in Mac and type/select Web Template Studio: Deploy App to start deploying your app.
   • You will have to select the same subscription again
   • Find the web app that you've just created
   • Click "Yes" in the notification window on the lower right corner (build prompt)
   • Click "Deploy" on the window pop-up (deploy window)
   • Click "Yes" on the notification window on the lower right corner (default prompt)
3. Once the deployment is done, click "Browse website" in the notification window on the lower right corner to check out your newly deployed app.

Consider adding authentication and securing back-end API's by following Azure App Service Security.

Full documentation for deployment to Azure App Service can be found here: Deployment Docs.

File Structure

The back-end is based on Express Generator. The front-end is based on Angular cli "ng".

The front-end is served on http://localhost:3000/ and the back-end on http://localhost:3001/.

.
├── server/ - Express server that provides API routes and serves front-end
│ ├── routes/ - Handles API calls for routes
│ ├── app.ts - Adds middleware to the express server
│ ├── constants.ts - Defines the constants for the endpoints and port
│ └── server.ts - Configures Port and HTTP Server
├── src - Angular front-end
│ └── app - Angular main root module
│    ├── app-shell - Angular main components
│    └── app.module.ts - Angular root module.
└── README.md

Additional Documentation

• Angular Docs - https://angular.io/docs

• Angular Router - https://angular.io/guide/router

• Bootstrap CSS - https://getbootstrap.com/

• Express - https://expressjs.com/

  This project was created using Microsoft Web Template Studio.