generator-azure-web-app
Advanced tools
Minimalist Web App generator: Webpack/Rollup + React + Express, deployable to vanilla Node.js, Azure App Service, and IIS
Minimalist Azure Web App generator: Webpack/Rollup + React + Express, deployable to standalone Node.js, Azure App Service, and IIS.
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:
yo azure-web-appIt takes about 5-10 minutes for the first build, have a little patience.
For the very first time, run
npm install -g yo generator-azure-web-appto install Yeoman and our scaffolding.
Run yo azure-web-app to create a new project.
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
PORTto8080, or runnpm start -- --port 8080.
public/lib/
package.json as direct dependencies, for example, npm install redux --savepublic/files/
gulp-imagemin will minify image assets (*.gif, *.jpg, *.png, *.svg)gulp-htmlmin will minify HTML files (*.html, and *.htm)lib/controllers/api.js
lib/package.json as direct dependencies, for example, cd lib && npm install mongodb --saveIf you added new packages or modified server code, don't forget to restart the development server to pick up new changes.
Run npm run build, to bundle JavaScript files, crush images, etc. It outputs to dist/website/.
Instead of Webpack used in development, you can opt for Rollup as bundler for production, it has better tree-shaking mechanism, thus smaller output file size.
Using rollup as bundler is experimental. Please file us an issue if you run into any problems.
There are few ways to select your bundler:
npm run build -- --bundler rollup for one-time switchNPM_CONFIG_BUNDLER to rollup or webpack.npmrc and set bundler = "rollup"rollupThe project supports multiple deployment scenarios, we will cover each separately.
Don't forget to build your project before deployment, run
npm run build.
Run node dist/website/index.js to run as a standalone Node.js.
To deploy to your SaaS provider, copy everything under
dist/website/to your provider.
Azure App Service support continuous deployment or traditional MSDeploy. For small teams, we recommend continuous deployment.
Azure Web App comes with handy continuous deployment feature. When you push/save your code, Azure Web App will pickup new changes from GitHub, local Git (hosted on Azure), Dropbox, OneDrive, etc.
Follow steps below for first time setup for GitHub deployment.
When deploying using continuous deployment, the project will build on Azure via Project Kudu.
Because the build is done on Azure, we modified the virtual path from
/site/wwwrootto/site/wwwroot/dist/website. This is done by customizingazuredeploy.json.
Currently, the "Deploy to Azure" service will not automatically setup webhooks on GitHub, thus, new commits do not re-sync automatically. To enable continuous deployment, go to Azure Portal and re-add GitHub deployment option.
Deploy thru Azure continuous deployment is limited and asynchronous. This makes the option unideal for medium or large teams.
We recommend VSTS Release Management for advanced deployment, it also comes with BVTs, performance tests, approval process, rollback, etc.
You can follow steps for VSTS here for advanced deployment scenario.
If you use CI/CD tools other than Azure and VSTS, you may want to integrate with MSDeploy.
npm run build to build the projectnpm run pack to pack the deployment as a MSDeploy ZIP filenpm run deploy -- --publish-settings=yoursite.PublishSettings to deploy with MSDeployTo use a specific version of Node.js, don't forget to modify
iisnode.ymlmanually.
We have prepared Dockerfile for deploying to Docker. Depends on your scenario, you can select one of the supported image types:
Run docker build . at the project root to build your docker image.
You can also deploy the project to an on-premise or hosted IIS.
npm run pack to pack the deployment as a MSDeploy ZIP fileThe 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>"
We update our scaffolding from time to time. To update your existing project, rerun yo azure-web-app and scaffold again. Yeoman will automatically download the latest scaffolding from npm.
Don't worry, Yeoman will prompt to overwrite a file if it should be replaced.
Although the user base of IE8 is fading, in some cases, you may still need to support older browsers.
Run npm start -- --hot false to start a development server without hot module replacement.
react@^0.14 and add es5-shimYou can copy the following code into index.html.
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.9/es5-sham.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/console-polyfill/0.2.3/index.min.js"></script>
<script src="https://unpkg.com/react@0.14/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@0.14/dist/react-dom.min.js"></script>
Some NPM packages are not IE8 friendly. For example, fetch does not support IE8. You may need to use fetch-ie8 instead.
Moreoever, some packages might be pre-transpiled, they might not have reserved keywords properly escaped. There are two ways to tackle this issue:
module in package.json and reference to non-transpiled version of code, or,node_modules/ folderThese are items we are working on or under consideration:
npm run buildnpm install should build.deployment file for Kudu to specify project folder at dist/website/package.json if possiblebundle.js/distgulp clean and gulp rebuildnpm test scriptIt is not an easy task to build a scaffolding that support lots of deployment scenarios. You can find all the roadblocks here.
style-loaderglamor or aphrodite. Please note that IE8 might not work with these modern CSS inlinersLike us? Star us.
Want to make it better? File an issue to us.
If you want to develop or debug this scaffolding, follow these steps:
npm uninstall generator-azure-web-app -g to uninstall any installed scaffoldinggit clone https://github.com/compulim/generator-azure-web-app.git to clone the repositorynpm link . to link-install this copy, instead of the official one from npm registryNext time, when you run Yeoman to generate a new azure-web-app project, it will use your copy of scaffolding you cloned.
FAQs
Minimalist Web App generator: Webpack/Rollup + React + Express, deployable to vanilla Node.js, Azure App Service, and IIS
We found that generator-azure-web-app demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.