JavaScript Express.js app serving static vanilla JS. This sample app is used in Microsoft Docs to demonstrate how to integrate Azure Storage, Azure Cosmos DB, and Azure Active Directory.

Related tags

Learning resource msdocs-javascript-nodejs-server
Overview

JavaScript on Azure Learn Path - Module 2 - Deploying a basic app to Azure

This Learn module requires the following Azure resources to deploy correctly:

  • Azure App Service
  • Azure Cosmos DB with MongoDB API

Requirements

  • Node.js LTS

Local development

  • Create Azure resources
    • Azure App Service + Cosmos DB for MongoDB API
      • Create resource in Azure portal
      • Create database
      • Create collection
      • Copy the following to the .env file:
        • Connection string
        • Database name
        • Collection name
    • Azure Storage (for images)
      • Create resource
        • Make sure Blob public access is enabled
      • Create container
      • Copy the following to the .env file:
        • Connection string
        • Container name
  • Install npm dependencies: npm install
  • Verify environment variables are set in .env
    • PORT=8080 - default port for Azure App Service
    • MONGODB_URI=
    • MONGODB_URI_DATABASE_NAME=
    • MONGODB_URI_COLLECTION_NAME=
    • AZURE_STORAGE_BLOB_CONNECTIONSTRING=
    • AZURE_STORAGE_BLOB_CONTAINER_NAME=
  • Start the server: npm start
  • Access Web App at: http://127.0.0.1:8080

Azure portal: Configure git to push to Azure App Service

  1. In the Azure portal, for your web app, select Deployment -> Deployment Center.
  2. On the Settings tab, copy the Git Clone URI. This will become your local git value for your remote named Azure.
  3. On the Local Git/FTPS credentials tab, copy the Username and Password under the application scope. These credentials allow you to deploy only to this web app.

Azure CLI: Configure git to push to Azure App Service

  1. Create a user scope credential for the web app.

    az webapp deployment user set --user-name <username> --password <password>

  2. After app is created, configure deployment from local git

    az webapp deployment source config-local-git --name <app-name> --resource-group <group-name>

    The output contains a URL like: https://@.scm.azurewebsites.net/.git. Use this URL to deploy your app in the next step.

Create local git remote to Azure App Service

  1. In a local terminal window, change the directory to the root of your Git repository, and add a Git remote using the URL you got from your app. If your chosen method doesn't give you a URL, use https://.scm.azurewebsites.net/.git with your app name in .

    git remote add azure <url>

  2. Push to the Azure remote with:

    git push azure <branchname>

  3. In the Git Credential Manager window, enter your user-scope or application-scope credentials, not your Azure sign-in credentials.

    If your Git remote URL already contains the username and password, you won't be prompted.

  4. Review the output. You may see runtime-specific automation.

  5. Browse to your cloud app to verify that the content is deployed:

    http://<app-name>.azurewebsites.net
Comments
  • Mod 5 - Upload file to blob storage

    Mod 5 - Upload file to blob storage

    Purpose

    • ...

    Does this introduce a breaking change?

    [ ] Yes
[ ] No

    Pull Request Type

    What kind of change does this Pull Request introduce?

    [ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

    How to Test

    • Get the code
    git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install
    • Test the code

    What to Check

    Verify that the following are valid

    • ...

    Other Information

    opened by diberry 0
  • Mod 3 - Cosmos DB for MongoDB API

    Mod 3 - Cosmos DB for MongoDB API

    Purpose

    • ...

    Does this introduce a breaking change?

    [ ] Yes
[ ] No

    Pull Request Type

    What kind of change does this Pull Request introduce?

    [ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

    How to Test

    • Get the code
    git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install
    • Test the code

    What to Check

    Verify that the following are valid

    • ...

    Other Information

    opened by diberry 0
  • Mod 2 sample code - JSON data only

    Mod 2 sample code - JSON data only

    Purpose

    • ...

    Does this introduce a breaking change?

    [ ] Yes
[ ] No

    Pull Request Type

    What kind of change does this Pull Request introduce?

    [ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

    How to Test

    • Get the code
    git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install
    • Test the code

    What to Check

    Verify that the following are valid

    • ...

    Other Information

    opened by diberry 0
  • refactor: refactor env variables

    refactor: refactor env variables

    Purpose

    • ...

    Does this introduce a breaking change?

    [ ] Yes
[ ] No

    Pull Request Type

    What kind of change does this Pull Request introduce?

    [ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

    How to Test

    • Get the code
    git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install
    • Test the code

    What to Check

    Verify that the following are valid

    • ...

    Other Information

    opened by anfibiacreativa 0
  • replace devcontainer for original app

    replace devcontainer for original app

    Purpose

    • ...

    Does this introduce a breaking change?

    [ ] Yes
[ ] No

    Pull Request Type

    What kind of change does this Pull Request introduce?

    [ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

    How to Test

    • Get the code
    git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install
    • Test the code

    What to Check

    Verify that the following are valid

    • ...

    Other Information

    opened by diberry 0
  • moving files around

    moving files around

    Purpose

    • ...

    Does this introduce a breaking change?

    [ ] Yes
[ ] No

    Pull Request Type

    What kind of change does this Pull Request introduce?

    [ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

    How to Test

    • Get the code
    git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install
    • Test the code

    What to Check

    Verify that the following are valid

    • ...

    Other Information

    opened by diberry 0
  • Rename env var, move model.

    Rename env var, move model.

    Purpose

    • ...

    Does this introduce a breaking change?

    [ ] Yes
[ ] No

    Pull Request Type

    What kind of change does this Pull Request introduce?

    [ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

    How to Test

    • Get the code
    git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install
    • Test the code

    What to Check

    Verify that the following are valid

    • ...

    Other Information

    opened by diberry 0
  • first pass

    first pass

    Purpose

    • ...

    Does this introduce a breaking change?

    [ ] Yes
[ ] No

    Pull Request Type

    What kind of change does this Pull Request introduce?

    [ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

    How to Test

    • Get the code
    git clone [repo-address]
cd [repo-name]
git checkout [branch-name]
npm install
    • Test the code

    What to Check

    Verify that the following are valid

    • ...

    Other Information

    opened by diberry 0
Owner
Azure Samples
Microsoft Azure code samples and examples in .NET, Java, Python, Node.js, PHP and Ruby
Azure Samples
GitHub
Sample project to demonstrate Playwright Test usage, pointing to ServeRest API and Front-end

demo-playwright-test This is a sample project to demonstrate Playwright Test usage, running tests against ServeRest API and Front-end. Pre-requisites

Stefan Teixeira 30 Oct 24, 2022
Chat app using Azure Web PubSub, Static Web Apps and other Azure services

Chatr - Azure Web PubSub Sample App This is a demonstration & sample application designed to be a simple multi-user web based chat system. It provides

Ben Coleman 55 Dec 31, 2022
docs: Repository for OSS Docs

Kubeslice Documentation This project repository contains the documentation for Kubeslice. We are so glad that you want to contribute! Prerequisites To

kubeslice 26 Jan 3, 2023
Base Rails app that includes login, social login, homepage, and basic model for serving as a scaffold app.

Rails7Base I created the Rails7Base as a scaffold application. Countless times, I had to create apps that must have the following features: Login syst

Chim Kan 14 Jul 2, 2022
Navigation-Menu-Javascript - A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked.

Navigation-Menu-Javascript A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked. Desktop view Mobile v

Ellis 2 Feb 16, 2021
Our project for The Microsoft Azure Trial Hackathon on Dev.to

Moodflix your mood, our suggestions. ?? About Overview of our project We have started this project with the purpose of participating to the Microsoft

Emanuele Bartolesi 37 Dec 22, 2022
A light microservice serving Atom 1.0 Feeds for MusicThread threads

MusicThread Web Feeds A light microservice to serve Atom 1.0 Feeds for MusicThread. People use web feeds for following updates to specific threads via

Brushed Type 4 Jun 15, 2022
The repos includes script for uploading bulk files in a directory to ipfs using nft.storage

Uploading Foloder to IPFS using nft.storage This repository includes script for uploading bulk files in a directory to ipfs using nft.storage Acknowle

Dapp Composer 22 Dec 17, 2022
This package will help parse OData strings (only the Microsoft Dataverse subset). It can be used as a validator, or you can build some javascript library which consumes the output of this library.

@albanian-xrm/dataverse-odata This package will help parse OData strings (only the Microsoft Dataverse subset). It can be used as a validator, or you

AlbanianXrm 3 Oct 22, 2022
Auto-compounder app for Cosmos blockchains using Authz

REStake REStake allows delegators to grant permission for a validator to compound their rewards, and provides a script validators can run to find thei

ECO Stake 237 Dec 29, 2022
A cache for @azure/msal-node that uses Azure KeyVault as a store

@intility/msal-keyvault-cache A cache for @azure/msal-node that uses Azure KeyVault as a store. Usage Install with npm install @intility/msal-keyvault

Intility 10 Mar 17, 2022
This is an example project to demonstrate how to use Nx, Next.js and Module Federation together.

Nextjs, Nx and Module Federation This is an example project to demonstrate how to use Nx, Next.js and Module Federation together. ⚠ This example depen

Bruno Silva 14 Nov 28, 2022
This a generic startpage to demonstrate the react startpage library.

This startpage is the official usage demo of the @startpage library. Yet another generic startpage A startpage with a generic layout and many settings

PrettyCoffee 98 Dec 30, 2022
This Repo Contains projects that demonstrate some concepts / algorithms / implemetation in some form of digital visualisation

Hacktoberfest 2022 OPEN FIRST Pull Request - GET STARTED WITH OPENSOURCE AND WIN SOME AWWSOME SWAGS ?? Contributors of Hacktoberfest 2022 This project

null 5 Nov 7, 2022
Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app

Gofiber and NextJS Static HTML Gofiber with NextJS Static HTML is a small Go program to showcase for bundling a static HTML export of a Next.js app. R

Mai 1 Jan 22, 2022
Live demo using Angular, github.dev, codespaces, copilot, azure static web apps, and devcontainers

One More Change! @ NgConf 2022 This is a quick project template for demoing github.dev, Codespaces, Copilot, Azure Static Web Apps, and Visual Studio

John Papa 14 Dec 15, 2022
Live demo using Angular, github.dev, codespaces, copilot, azure static web apps, and devcontainers

Cloud Computing with Codespaces First seen in the presentation One More Change! @ NgConf 2022 This is a quick project template for demoing github.dev,

John Papa 9 Sep 13, 2022
Dockerfiles used in PingCAP's docs CI pipeline

openapi-scripts Scripts used in postprocessing OpenAPI document for ReDoc. Postprocess the JSON file generated by bufbuild/buf dereference Use @apidev

Aolin 3 Jul 20, 2022
🪐 Ultralight Cosmos utilities for JS and TS

Essential Cosmos Ultralight Cosmos utilities for JS and TS ?? The TINIEST code size possible ʦ Fully typed with TypeScript (also works with JavaScript

Earnifi 7 Oct 24, 2022