CCC SEA LEVEL RISE VIEWER

A visualization of sea level, showing flooding extent upon regional critical facilities and roads with related reference layers developed by the Cape Cod Commission of Barnstable County (MA). The application is based upon React Boilerplate and uses esri-leaflet, mobx and other dependencies.

Local Docker Builds

# Navigate to the project directory
cd sea-level-rise-viewer/

# Comment 2 step build blocks at top & uncomment docker start block below in Dockerfile
# & save changes

# Build services, volumes, and networks with docker-compose
docker-compose up --build

# Delete local services, networks, and volumes with docker-compose
docker-compose down -v

GitFlow

Create local feature branch off dev Rebase with dev once feature branch is complete

# Once changes are complete, rebase with 'dev' and resolve any conflicts
git rebase -i dev

# Checkout, merge, and push rebased changes into dev
git checkout dev
git merge feature-branch
git push origin dev

---

Resources

ReactJS Documentation

• ReactJS

Esri Leaflet Documentation

• Esri Leaflet

Examples

• Demo app using React, Leaflet, and Esri
• React Leaflet Example
• Esri-React-Mobx-Webpack
• ArcGIS API for JavaScript React
• Esri Leaflet Webpack Example
• Esri Espania List For Developers
• Using React with Leaflet (and Esri Leaflet)
• Testmap-esri-leaflet-react-react-dom-leaflet

React Boilerplate

A Digia project.

Why do I want this?

As you probably know, there are numerous boilerplates available for React, so you might be wondering why you would want to use ours. Most of the boilerplate projects come with a lot of code that you rarely need. Our boilerplate was bootstrapped with Create React App and provides you with a great starting point for any React project with as few lines of code as possible, especially if you want to use Flowtype.

What do I need to get started?

• Node (version 6 or later)
• Yarn

What's in the box?

• Flowtype Type checker
• React User interface components
• MobX Simple, scalable state management
• Lodash Utility library
• Babel JavaScript transpiler
• ESLint JavaScript Linter
• Prettier Code formatter
• PostCSS CSS transformer
• Stylelint CSS Linter
• Webpack Module bundler
• Jest Testing solution

How do I use this?

You can find our documentation here.

Usage

Create project

Install create-project and create your project.

yarn global add create-project
create-project my-project digiaonline/react-boilerplate && cd my-project

Install dependencies

Install the project dependencies using Yarn.

yarn

Create the environment

Create your environment by copying the example environment.

cp .env.example .env

Development server

You can start the development server with the start script.

yarn start

Distribution build

You can compile the distribution build with the build script.

yarn build

Test

Test suite

You can run the test suite with the test script.

yarn test

License

MIT