Demo - https
NEW!! Alternate Boilerplate
This project requires Node.js
npm install will install most dependencies and on
postinstall, bower will install the rest. This project has browser sync setup with live reload, so it will refresh as you develop.
Basic script to start browser-sync server, gulp tasks, and babel-cli. App is served @
Run tests using Mocha and Chai, an example test is in the test folder.
npm run secure
npm starthowever browser-sync is run in https mode, so it's served @
npm run dist
Build for production. Gulp minifies Pug, Sass, images, and adds the version for cache-busting to css and js resources. There is a
build.jsfile that uses Rollup to bundle the local src code and Requirejs to bundle in bower dependencies and minify the output. It then uses react-prerender to prerender your root component and inject it into the index page.
You should notice some css(
critical.scss) will get inlined into the
index.pug file. This should be the minimal amount of css needed for your above-the-fold content and your pre-rendered components. There are build scripts in place to generate an optimized build and pre render your components (which you should always try to find a way to do). See
npm run dist under Scripts.
This has the ability to run in HTTPS since it uses protocol agnostic resources only from js.arcgis.com and local resources. It has a Content Security Policy with the configurations listed after this section, which can be tweaked under
src/jade/CSP.pug or removed from the app by not including it in
script-src 'self' js.arcgis.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' js.arcgis.com 'unsafe-inline';
There is an exmaple
.htaccess file in the root you can use. There are also gulp tasks setup to inject the version number from the
package.json onto the end of your css resources and into the
dojoConfig variable, making for an effective cache-busting mechanism when used correctly.
Changes in the latest version
- Updated Jade to Pug as Jade is being renamed.
- Replaced Stylus with Sass.
- Changed the name of the build script to be more inline with other projects.
rjs.build.jsin favor of
- This now uses Rollup to generate an even more optimized bundle, then uses RequireJS to add bower installed libs to the bundle and minify the whole thing. Afterwards, the same react-prerender script is leveraged to prerender the root component.
- Upgraded Gulp scripts to a simpler workflow
- Added in
gulp-replace, this is how
critical.scssget's injected using a specific comment syntax, this can be extended to handle much more custom applications.