1 | # generator-azure-web-app
|
2 |
|
3 | [![Deploy to Azure](http://azuredeploy.net/deploybutton.png)](https://azuredeploy.net/)
|
4 |
|
5 | Minimalist Azure Web App generator: [Webpack](https://webpack.github.io/)/[Rollup](https://rollupjs.org/) + [React](https://facebook.github.io/react/) + [Express](https://expressjs.com/), deployable to vanilla [Node.js](https://nodejs.org/), [Azure Web Apps](https://azure.microsoft.com/en-us/services/app-service/web/), and IIS.
|
6 |
|
7 | # Why us?
|
8 |
|
9 | Modern websites are not just bunches of plain text files. Build process increases page load efficiency and overall page performance.
|
10 |
|
11 | But everyone build and promote their own build process. There are few reasons you should choose us:
|
12 |
|
13 | * Scaffold with [Yeoman](https://yeoman.io/), `yo azure-web-app`
|
14 | * For greater flexibility, we only include React
|
15 | * Bundle with the *best* bundler
|
16 | * [Webpack](https://webpack.github.io/) for development, hot module replacement means less page refresh
|
17 | * [Rollup](https://rollupjs.org/) for production, better tree-shaking algorithm means smaller file size
|
18 | * Hybrid deployment
|
19 | * Standalone Node.js
|
20 | * Azure Web App
|
21 | * On-premise or hosted IIS
|
22 |
|
23 | # Try it out in 3 easy steps
|
24 |
|
25 | 1. Fork [this repository](https://github.com/candrholdings/generator-azure-web-app/)
|
26 | 2. Click [![Deploy to Azure](http://azuredeploy.net/deploybutton.png)](https://azuredeploy.net/)
|
27 | 3. Push your changes and see it continuously deploy to Azure
|
28 |
|
29 | > It takes about 5-10 minutes to build for the first time, have a little patience.
|
30 |
|
31 | # How to develop professionally
|
32 |
|
33 | 1. Create a new Web App project
|
34 | 2. Run development server and develop locally
|
35 | 3. Build for production deployment
|
36 | 4. Deploy to target servers
|
37 | * As a vanilla Node.js
|
38 | * To Azure Web App
|
39 | * To IIS, on-premise or cloud
|
40 |
|
41 | ## Create a new Web App Project
|
42 |
|
43 | For the very first time, install [Yeoman](https://yeoman.io/) and our generator, `npm install -g yo generator-azure-web-app`.
|
44 |
|
45 | Subsequently, run `yo azure-web-app` to create a new project with [Yeoman](https://yeoman.io/).
|
46 |
|
47 | ## Run development server and develop locally
|
48 |
|
49 | Run `npm start`, the development server will listen to port 80 and available at [http://localhost/](http://localhost/).
|
50 |
|
51 | To change the port to 8080, either set environment variable `PORT` to `8080`, or run `npm start -- --port 8080`.
|
52 |
|
53 | * Edit JavaScript at [`web/src/`](web/src/)
|
54 | * Code are transpiled by [Babel](https://babeljs.io/) with [ES2015](https://npmjs.com/package/babel-preset-es2015) and [React](https://npmjs.com/package/babel-preset-react)
|
55 | * To import packages, mark them as development dependencies, for example, `npm install redux --save-dev`
|
56 | * Edit static files at [`web/files/`](web/files/), including
|
57 | * Image assets, thru [`gulp-imagemin`](https://npmjs.com/package/gulp-imagemin)
|
58 | * HTML files, thru [`gulp-htmlmin`](https://npmjs.com/package/gulp-htmlmin)
|
59 | * Add new RESTful API at [`src/controllers/api.js`](src/controllers/api.js)
|
60 | * To import packages, mark them as direct dependencies, for example, `npm install serve-static --save`
|
61 | * Don't forget to restart the development server to pick up your new code
|
62 |
|
63 | ## Build the project for production deployment
|
64 |
|
65 | Before deploying to the server, you will need to build the JavaScript bundle, minify images, etc. Run `npm run build`.
|
66 |
|
67 | > Instead of Webpack, we use rollup.js as bundler because it has a better tree-shaking mechanism, thus smaller output file size.
|
68 |
|
69 | > To use Webpack for production build, run `npm run build -- --bundler webpack`.
|
70 |
|
71 | ## Deploy to target servers
|
72 |
|
73 | The project support hybrid deployment models:
|
74 |
|
75 | * Standalone Node.js
|
76 | * [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/)
|
77 | * Thru [continuous deployment](https://azure.microsoft.com/en-us/blog/using-app-service-web-apps-continuous-deployment-with-github-organizations/)
|
78 | * Thru MSDeploy
|
79 | * IIS with [iisnode](https://github.com/tjanczuk/iisnode)
|
80 |
|
81 | ### Deploy as a standalone Node.js
|
82 |
|
83 | To run as a standalone Node.js server, go under `dist/website/`, then run `node app.js`.
|
84 |
|
85 | > To deploy to your SaaS provider, copy everything under `dist/website/` to your provider. We recommend [`PM2`](http://pm2.io/) for process management and scalability.
|
86 |
|
87 | ### Deploy to Azure App Service
|
88 |
|
89 | [Azure App Service](https://azure.microsoft.com/en-us/services/app-service/web/) support [continuous deployment](https://azure.microsoft.com/en-us/blog/using-app-service-web-apps-continuous-deployment-with-github-organizations/) or traditional [MSDeploy](https://azure.microsoft.com/en-us/blog/simple-azure-websites-deployment/). We recommend continuous deployment for most projects.
|
90 |
|
91 | #### Thru continuous deployment
|
92 |
|
93 | Azure Web App can automatically update itself when you push/save your code. You can deploy with [GitHub](https://github.com/), local Git, [Dropbox](https://dropbox.com/), or [OneDrive](https://onedrive.com/). In this example, we will deploy it thru GitHub.
|
94 |
|
95 | 1. Commit your project to GitHub
|
96 | 2. Browse to your project on GitHub
|
97 | 3. Click [![Deploy to Azure](http://azuredeploy.net/deploybutton.png)](https://azuredeploy.net/)
|
98 |
|
99 | > When deploying using continuous deployment, the project will be built on Azure, instead of locally. We prepared a [custom deployment script](https://github.com/projectkudu/kudu/wiki/Custom-Deployment-Script) at [deploy.cmd](deploy.cmd)
|
100 |
|
101 | #### Thru MSDeploy
|
102 |
|
103 | Deploying thru MSDeploy is uncommon, but it is required when you prefer CI/CD using other tools, such as [VSTS Release Management](https://www.visualstudio.com/en-us/features/release-management-vs.aspx).
|
104 |
|
105 | 1. Pack the deployment as a MSDeploy ZIP file, run `npm run pack`
|
106 | 2. Download publish settings file, either from [Azure Dashboard](https://portal.azure.com/) or using [Azure PowerShell](https://msdn.microsoft.com/en-us/library/dn385850(v=nav.70).aspx)
|
107 | 3. Modify iisnode configuration to select correct Node.js version
|
108 | * Add a line to [`iisnode.yml`](iisnode.yml): `nodeProcessCommandLine: "D:\Program Files (x86)\nodejs\6.6.0\node.exe"`
|
109 | 4. Deploy using MSDeploy, run `npm run deploy --publishsettings=yoursite.PublishSettings`
|
110 |
|
111 | > When deployed thru MSDeploy, [`iisnode.yml`](iisnode.yml) is not updated by Project Kudu automatically, thus you will need to modify [`iisnode.yml`](iisnode.yml) to manually select Node.js version.
|
112 |
|
113 | ### Deploy to IIS
|
114 |
|
115 | You can also deploy the project to an on-premise or hosted IIS.
|
116 |
|
117 | 1. Make sure [Node.js](https://nodejs.org/) and [iisnode](https://github.com/tjanczuk/iisnode) is installed on the target server
|
118 | 2. Pack the deployment as a MSDeploy ZIP file, run `npm run pack`
|
119 | 3. Use MSDeploy to [deploy your package](https://msdn.microsoft.com/en-us/library/dd465337(v=vs.110).aspx)
|
120 |
|
121 | The following MSDeploy command-line switches can be used to deploy the package to an IIS box.
|
122 |
|
123 | ```
|
124 | "C:\Program Files (x86)\IIS\Microsoft Web Deploy V3\msdeploy.exe"
|
125 | -verb:sync
|
126 | -source:package="dist\packages\web.zip"
|
127 | -dest:
|
128 | auto,
|
129 | ComputerName="https://<server>:443/msdeploy.axd?site=<appname>",
|
130 | UserName='<username>',
|
131 | Password='<password>',
|
132 | AuthType='Basic'
|
133 | -setParam:name="IIS Web Application Name",value="<appname>"
|
134 | ```
|
135 |
|
136 | (Whitespace and line breaks added for clarity)
|
137 |
|
138 | ## Work in progress
|
139 |
|
140 | These are items we are working on or under consideration:
|
141 |
|
142 | * [x] ~~Add [pngout](http://www.advsys.net/ken/utils.htm) to `npm run build`~~
|
143 | * [x] ~~Continuous deployment on Azure Web Apps~~
|
144 | * [x] ~~`npm install` should build~~
|
145 | * [x] ~~`.deployment` file for Kudu to specify project folder at `dist/website/`~~
|
146 | * [x] ~~Scaffold with [Yeoman](http://yeoman.io/)~~
|
147 | * [x] ~~Use a single `package.json` if possible~~
|
148 | * [x] ~~Host development server programmatically~~
|
149 | * [x] ~~Bundle using [rollup.js](http://rollupjs.org/)~~
|
150 | * [ ] Find a better plugin or way to bundle LESS into `bundle.js`
|
151 | * [x] ~~Uglify production `bundle.js`~~
|
152 | * [x] ~~Uglify rollup.js build~~
|
153 | * [x] ~~Uglify Webpack build~~
|
154 | * [ ] Steps to deploy from [VSTS Release Management](https://www.visualstudio.com/en-us/features/release-management-vs.aspx)
|
155 | * [ ] Include [Jest](https://facebook.github.io/jest/) and `npm test` script
|
156 |
|
157 | ## Contributions
|
158 |
|
159 | Like us? [Star](https://github.com/candrholdings/generator-azure-web-app/stargazers) us.
|
160 |
|
161 | Want to make it better? File an [issue](https://github.com/candrholdings/generator-azure-web-app/issues) to us.
|