node package manager

generator-azure-web-app

Minimalist Web App generator: Webpack/Rollup + React + Express, deployable to vanilla Node.js, Azure App Service, and IIS

generator-azure-web-app

npm version Node.js dependencies npm downloads

Deploy to Azure

Minimalist Azure Web App generator: Webpack/Rollup + React + Express, deployable to standalone Node.js, Azure App Service, and IIS.

Why us?

Modern websites are not just bunches of plain text files. Build process increases page load efficiency and overall page performance.

But everyone build and promote their own build process. There are few reasons you should choose us:

  • Scaffold with Yeoman, yo azure-web-app
  • For greater flexibility, we only include React
  • Bundle with the best bundler
    • Webpack for development, hot module replacement means less page refresh
    • Rollup for production, better tree-shaking algorithm means smaller file size
  • Hybrid deployment

Try it out in 3 easy steps

  1. Fork this repository
  2. Click Deploy to Azure
  3. Push your changes and see it continuously deploy to Azure

It takes about 5-10 minutes to build for the first time, have a little patience.

How to develop professionally

  1. Create a new Web App project
  2. Run development server and develop locally
  3. Build for production deployment
  4. Deploy to target servers

Create a new Web App Project

For the very first time, install Yeoman and our generator, npm install -g yo generator-azure-web-app.

Subsequently, run yo azure-web-app to create a new project with Yeoman.

Run development server and develop locally

Run npm start, the development server will listen to port 80 and available at http://localhost/.

To change the port to 8080, either set environment variable PORT to 8080, or run npm start -- --port 8080.

  • Edit JavaScript at web/src/
    • Code are transpiled by Babel with ES2015 and React
    • To import packages, mark them as development dependencies, for example, npm install redux --save-dev
  • Edit static files at web/files/, including
  • Add new RESTful API at src/controllers/api.js
    • To import packages, mark them as direct dependencies, for example, npm install serve-static --save

Don't forget to restart the development server to pick up your new code

Build the project for production deployment

Before deploying to the server, you will need to build the JavaScript bundle, minify images, etc. Run npm run build.

Instead of Webpack, we use rollup.js as bundler because it has a better tree-shaking mechanism, thus smaller output file size.

To opt for Webpack for production build, run npm run build -- --bundler webpack.

Deploy to target servers

The project support hybrid deployment models:

Deploy as a standalone Node.js

To run as a standalone Node.js server, go under dist/website/, then run node app.js.

To deploy to your SaaS provider, copy everything under dist/website/ to your provider. We recommend PM2 for process management and scalability.

Deploy to Azure App Service

Azure App Service support continuous deployment or traditional MSDeploy. We recommend continuous deployment for most projects.

Thru continuous deployment

Azure Web App can automatically update itself when you push/save your code. You can deploy with GitHub, local Git, Dropbox, or OneDrive. In this example, we will deploy it thru GitHub.

  1. Commit your project to GitHub
  2. Browse to your project on GitHub
  3. Click Deploy to Azure

When deploying using continuous deployment, the project will be built on Azure, instead of locally. We prepared a custom deployment script at deploy.cmd

Thru MSDeploy

Deploying thru MSDeploy is uncommon, but it is required when you prefer CI/CD using other tools, such as VSTS Release Management.

  1. Pack the deployment as a MSDeploy ZIP file, run npm run pack
  2. Download publish settings file, either from Azure Dashboard or using Azure PowerShell
  3. Modify iisnode configuration to select correct Node.js version
  • Add a line to iisnode.yml: nodeProcessCommandLine: "D:\Program Files (x86)\nodejs\6.6.0\node.exe"
  1. Deploy using MSDeploy, run npm run deploy --publish-settings=yoursite.PublishSettings

When deployed thru MSDeploy, iisnode.yml is not updated by Project Kudu automatically, thus you will need to modify iisnode.yml to manually select Node.js version.

Deploy to IIS

You can also deploy the project to an on-premise or hosted IIS.

  1. Make sure Node.js and iisnode is installed on the target server
  2. Pack the deployment as a MSDeploy ZIP file, run npm run pack
  3. Use MSDeploy to deploy your package

The following MSDeploy command-line switches can be used to deploy the package to an IIS box.

"C:\Program Files (x86)\IIS\Microsoft Web Deploy V3\msdeploy.exe"
  -verb:sync
  -source:package="dist\packages\web.zip"
  -dest:
    auto,
    ComputerName="https://<server>:443/msdeploy.axd?site=<appname>",
    UserName='<username>',
    Password='<password>',
    AuthType='Basic'
  -setParam:name="IIS Web Application Name",value="<appname>"

Roadmap

These are items we are working on or under consideration:

  • Add pngout to npm run build
  • Continuous deployment on Azure App Service
    • npm install should build
    • .deployment file for Kudu to specify project folder at dist/website/
  • Scaffold with Yeoman
  • Use a single package.json if possible
  • Host development server programmatically
  • Bundle using rollup.js
    • Find a better plugin or way to bundle LESS or SASS into bundle.js
  • Uglify production bundle.js
    • Uglify rollup.js build
    • Uglify Webpack build
  • Steps to deploy from VSTS Release Management
  • Include Jest and npm test script

Contributions

Like us? Star us.

Want to make it better? File an issue to us.