Skip to content

Latest commit

 

History

History
193 lines (131 loc) · 8.79 KB

README.md

File metadata and controls

193 lines (131 loc) · 8.79 KB
Raw

An app all about the 2020 Tokyo Olympics, postponed to Summer 2021!

Gitpod ready-to-code

Background

Building a flippable trading card app featuring all the 2021 Tokyo Summer Olympics sporting events following the Microsoft Build session with Jen Looper to show Olympics sports on a page that is mobile friendly with a responsive design.

Student Learning

See student Branch of the Olympic App, which we built together at Microsoft Build. Welcome, students and learners of all type.

To get started, fork that student version of the app and open it in Visual Studio Code. Look for the medal emoji to follow the steps and build this app. The complete app is built on the 'main' branch.

About the Application

Using Vite, Vanilla JS, and CSS Grid, let's create a card-flipping app!

Vite will handle the architecture and module bundling, we will use Vanilla JS to avoid framework fatigue, and use CSS Grid for responsive design needs. The actual card flipping can be done using plain old CSS transforms.

To run this app out of the box, make sure you have Node and NPM installed locally (see below for links). Fork the 'main' branch, navigate to the app root and, in your command line or terminal, type: npm i to install dependencies. Then, type npm run dev to run the app locally (usually on localhost:3000). Since the app only uses Vite and no other framework, your dependency install is lightweight.

screenshot

Resources:

Npm: https://npmjs.com

Node: https://nodejs.org

Vite: About Vite

The Tokyo Olympics 2020 web site (source of the sports event data)

Free CSS Grid Course

Learn how to develop applications using node.js

JavaScript basics video series

Free full course on web development

Build a terrarium with JS/CSS/HTML

Deploy to Azure Static Website

Follow the steps at Building your first static site using the Azure CLI. Instead of using a new repository, use this repository and in the command line section, execute something like the following.

Here is an example how the tutorial can be done in your browser.

Log into Azure portal, open a new cloud shell - set up a new storage account if you'd like and delete it later to prevent costs. In the cloud shell, execute command like:

az staticwebapp create \
    -n olympic-app \
    -g rg-eastus2 \
    -s https://github.com/justunsix/olympic-app \
    -l eastus2 \
    -b main \
    --app-location "dist" \
    --token my_token \
    --sku free \
    --subscription mysubscription
  • "dist" is used to match to Vue-like framework used for this application.
  • --sku free creates the site under a free site which has limits

Deploy to Azure Storage Account Static Site

Follow instructions to upload the site to a static site using Azure storage account blobs.

Install and build the application with npm i and npm run build

Using the Azure CLI, copy the dist folder generated by the build to the storage account.

az account set --subscription mysubscription

az storage blob service-properties update \
    --account-name mystorageaccount \
    --static-website \
    --404-document index.html \
    --index-document index.html \
    --auth-mode login

az storage blob upload-batch -s dist -d '$web' --account-name mystorageaccount

# Get the URL and visit it in a browser
az storage account show -n mystorageaccount -g myresourcegroup --query "primaryEndpoints.web" --output tsv

Deploy to Azure App Service

Using GitHub Actions

See Deploy to App Service using GitHub Actions.

Using CLI

Requires:

# Log into Azure
az login

# Create resource group and set as default values to avoid specifying them each time later
az group create --name myResourceGroup --location westus
az config set defaults.group=myResourceGroup defaults.location=westus

# Create an App Service plan using Linux in free tier.
az appservice plan create --name olympic-cards --resource-group myResourceGroup --sku FREE --is-linux

# Create and deploy web app service with Azure CLI command
# Get run times using command: az webapp list-runtimes --linux
# Use node 10+ per package-lock.json engines
az webapp create --name olympic-cards --resource-group myResourceGroup --plan olympic-cards --runtime "NODE|14-lts" --deployment-source-url https://github.com/justunsix/olympic-app.git --deployment-source-branch main

# Set npm settings to include vite
az webapp config appsettings set --name olympic-cards --resource-group myResourceGroup --settings NPM_CONFIG_PRODUCTION="false" 
az webapp config appsettings set --name olympic-cards --resource-group myResourceGroup --settings YARN_PRODUCTION="false"

# Alternate of above to use a local git for deployment
az webapp create --name olympic-cards --resource-group myResourceGroup --plan olympic-cards --runtime "NODE|14-lts" --deployment-local-git
# Optional zip deployment
# az webapp up --name olympic-cards --logs --launch-browser
# The --logs command displays the log stream immediately after launching the webapp. 
# The --launch-browser command opens the default browser to the new app. 
# Use the same command to redeploy the entire app again.

# In a separate terminal, set up user-level deployment credentials with Azure CLI
az webapp deployment user set --user-name <username> --password <password>
# If an error like: Operation returned an invalid status 'Conflict'
# occurs, it may mean the username is taken or password is not complex enough.
# Choose a different username and more complex password

# For "--deployment-local-git", get new remote git URL 
az webapp deployment source config-local-git --name olympic-cards
# Add remote URL to git repo
git remote add azure <insert URL you got from the previous command>

# For "--deployment-local-git",
# Unix, url=$(az webapp deployment source config-local-git --name olympic-cards --resource-group myResourceGroup --query url --output tsv)
# git remote add azure $url

# For "--deployment-local-git",
# Push you code to Azure and enter your password from the deployment user set command previously when asked. 
# Instead of 'main', you may want to choose your branch to push to Azure. 
# master is required after your local branch to ensure it pushes to the 'master' branch read for Azure deployment
git push azure main:master

# View (tail) logs
az webapp log tail --name olympic-cards

# Optionally remove resources to avoid costs
az group delete --name myResourceGroup

Deploy to Heroku

Install the Heroku CLI and set up folder. Execute these commands inside of the root directory of this repository to deploy the application to a new site.

# Make sure npm installation is latest
npm install npm@latest -g

# Install and build application
npm i
npm run build

# install Heroku CLI and verify install - skip this step if you already have Heroku CLI installed
npm install -g heroku
heroku --version

# Login using browser
heroku login

# Set up application on Heroku
heroku create
# Tell Heroku to install dev dependencies per https://github.com/vitejs/vite/issues/1215
# vite is by default installed as dev dependency and in production dev dependencies are not installed 
heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false
# Push to remote heroku for build which does install and runs start script in package.json using vite --host --port $PORT
git push heroku main

# Open site in browser
heroku open