search

Robert-W / esri-flux-react

Simple Boilerplate for using React and Esri's JavaScript API together. It supports IE 9+ and the last two versions of all major browsers and can run in https or http. For data management, it's using Alt.js (a flux library).
https://robert-w.github.io/esri-flux-react/
MIT License
22 stars 5 forks source link

readme

esri-flux-react Build Status

Simple Boilerplate for using React and Esri's JavaScript API together. It supports IE 9+ and the last two versions of all major browsers and can run in https or http. For data management, it's using Alt.js (a flux library).

Demo - https

https://robert-w.github.io/esri-flux-react/

NOTE

Current branch is using the 4.0 release, their are tags for 3.15 & 3.16 if you need those but they may also be using a slightly older version of the template with different tooling.

NEW!! Alternate Boilerplate

Check out another boilerplate with the ArcGIS JavaScript API using a different set of tools. It is using the 4.0 API, React, Redux, Sass, and optionally Flow for type checking. You can find it here esri-redux. This boilerplate is going nowhere but incase you wanted to try it out with some different libraries, head over there to see how.

Getting Started

This project requires Node.js

  1. npm install
  2. npm start
  3. Open http://localhost:3000

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.

Scripts

npm start

Basic script to start browser-sync server, gulp tasks, and babel-cli. App is served @http://localhost:3000

npm test

Run tests using Mocha and Chai, an example test is in the test folder.

npm run secure

Same as npm start however browser-sync is run in https mode, so it's served @https://localhost:3000

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.js file 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.

Tooling

This boilerplate uses Babel to compile to ES5 compatible code for development and Rollup (with the help of babel) for production, giving you access to the latest JavaScript features. It uses Pug for HTML and Sass for css, however these could be swapped out relatively easy for other options if desired. It also uses Gulp and BrowserSync for building/serving the application.

Performance

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.

Security

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 src/index.pug.

script-src 'self' js.arcgis.com 'unsafe-inline' 'unsafe-eval';
style-src 'self' js.arcgis.com 'unsafe-inline';

Cache

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

Versions

Resources