In the root directory of the project...
- Install node modules
yarn install
ornpm install
. - Install Python dependencies
yarn install-requirements
ornpm install-requirements
- Start development server
yarn start
ornpm start
.
- Create a file in
/src/views
with your Vue Template. - Add a route for your page to
/src/router/index.js
. - Add a button to the navigation bar in
/src/components/NavBar.vue
.
Replace the sample data stored in /server/sample_data.py. Replace the default images. Sample images are consumed from https://wtsrepository.blob.core.windows.net/sampledata/.
If you selected Azure App Service when creating your project, follow these steps:
- Press
Ctrl + Shift + P
in Windows/Linux orShift ⇧ + Command ⌘ + P
in Mac and type/selectWeb Template Studio: Deploy App
to start deploying your app. - After your project is built, click "Deploy" on the window pop up.
- 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:
- Press
Ctrl + Shift + P
in Windows/Linux orShift ⇧ + Command ⌘ + P
in Mac and type/selectAzure 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 12 LTS for a Node/Express application, Python 3.7 for a Flask application or .Net Core Latest runtime for ASP .NET application.
- Once the creation is done, click "Deploy" in the notification window on the lower right corner.
- Click "Browse" on the top middle section of your screen and select the "server" folder (or "publish" folder if ASP.NET backend is selected) within your project
- Click "Yes" in the notification window on the lower right corner (build prompt)
- Click "Deploy" on the window pop up
- Click "Yes" in the notification window on the lower right corner again
- 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.
The front-end is based on Vue CLI. It is served on http://localhost:3000/.
The back-end is based on Flask. It is served on http://localhost:3001/.
.
├── server/ - Flask server that provides API routes and serves front-end
│ ├── constants.py - Defines the constants for the endpoints and port
│ ├── sample_data.py - Contains all sample text data for generate pages
│ └── server.py - Configures Port and HTTP Server and provides API routes
├── src - Vue front-end
│ ├── assets/ - Default images
│ ├── components/ - Common Vue components shared between different views
│ ├── router/ - Vue routes
│ ├── views/ - The main pages displayed
│ ├── constants.js - Contains constants for error messages and endpoints
│ ├── App.vue - Base Vue template
│ └── main.js - Root Vue Component
└── README.md
-
Vue Router - https://router.vuejs.org/
-
Bootstrap CSS - https://getbootstrap.com/
-
Flask - http://flask.pocoo.org/
This project was created using Microsoft Web Template Studio.