This lab will walk you through hosting a front-end JavaScript app with Azure Storage. This is a cheap and fast way to host self contained, front end assets like React/Angular/Vue apps.
- Open the integrated terminal in VS Code with
ctrl + tilde - Clone and open the code in this repository with VS Code.
cd ~/Downloads
git clone https://github.com/bowdenk7/lab1-spa.git
cd lab1-spa ; code . -r
- Run
npm installto get the dependencies - Run
npm run buildto build locally - Run locally with
npm run start - You should see the following:
-
Open the Azure tab on the left side of VS Code
-
Open the storage section
-
Open the demo subscription:
CADDAI Backups
-
Right click the storage account that corresponds to your machine number (ie. jsinteractive) and choose
Deploy to static website. -
A warning will popup that says "The storage container "jsinteractive4/$web" contains 15 files. Deploying will delete all of these existing files. Continue?" Choose Delete and deploy
-
Choose browse and select the build folder. This contains the React SPA you just built locally.
- When deployment completes, you'll see a notification in the bottom right. Click
Browse to Website
- Back in VS Code, open
src/App.jsand make a change. If you're unfamiliar with React, that's ok, find line 12 and edit the text.
-
Rebuild with
npm run build -
Redeploy following the same steps in the above section
This lab shows you how quickly and easily you can deploy a front-end app to Azure Storage using VS Code and the Azure Storage extension. These tools allow for rapid iteration and deployment.