Chronas

Table of Contents

• Chronas
  • Table of Contents
  • Requirements
  • Installation
  • Running the Project
  • Project Structure
  • Live Development
    • Hot Reloading
    • Redux DevTools
  • Routing
  • Testing
  • Building for Production
  • Deployment
    • Static Deployments
    • Docker
  • Thank You

11. Thank You

Installation

After confirming that your environment meets the above requirements, you can install Chronas locally by doing the following:

$ git clone https://github.com/daumann/chronas.git <my-project-name>
$ cd <my-project-name>

When that's done, install the project dependencies.

$ npm install

Running the Project

After completing the installation step, you're ready to start the project!

$ npm start  # Start the development server

While developing, you will probably rely mostly on npm start; however, there are additional scripts at your disposal:

|npm run <script> |Description| |-------------------|-----------| |start |Serves Chronas at localhost:3000| |build |Builds the application to ./dist| |test |Runs unit tests with Karma. See testing| |test:watch |Runs test in watch mode to re-run tests when changed| |lint |Lints the project for potential errors| |lint:fix |Lints the project and fixes all correctable errors|

Project Structure

The project structure is fractal, where functionality is grouped primarily by feature rather than file type. This structure is only meant to serve as a guide, it is by no means prescriptive. That said, it aims to represent generally accepted guidelines and patterns for building scalable applications. If you wish to read more about this pattern, please check out this awesome writeup by Justin Greenberg.

Live Development

Hot Reloading

Hot reloading is enabled by default when the application is running in development mode (npm start). This feature is implemented with webpack's Hot Module Replacement capabilities, where code updates can be injected to the application while it's running, no full reload required. Here's how it works:

• For JavaScript modules, a code change will trigger the application to re-render from the top of the tree. Global state is preserved (i.e. redux), but any local component state is reset. This differs from React Hot Loader, but we've found that performing a full re-render helps avoid subtle bugs caused by RHL patching.

• For Sass, any change will update the styles in realtime, no additional configuration or reload needed.

Redux DevTools

We recommend using the Redux DevTools Chrome Extension. Using the chrome extension allows your monitors to run on a separate thread and affords better performance and functionality. It comes with several of the most popular monitors, is easy to configure, filters actions, and doesn't require installing any packages in your project.

However, it's easy to bundle these developer tools locally should you choose to do so. First, grab the packages from npm:

npm add --dev redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor

Then follow the manual integration walkthrough.

Routing

We use react-router route definitions (<route>/index.js) to define units of logic within our application. See the project structure section for more information.

Testing

To add a unit test, create a .spec.js file anywhere inside of ./tests. Karma and webpack will automatically find these files, and Mocha and Chai will be available within your test without the need to import them.

Building for Production

Deployment

Out of the box, Chronas is deployable by serving the ./dist folder generated by npm run build. At this stage of development, Chronas is using a fake REST api for test data input.

Static Deployments

Serve the application with a web server such as nginx by pointing it at your ./dist folder. Make sure to direct incoming route requests to the root ./dist/index.html file so that the client application will be loaded; react-router will take care of the rest. If you are unsure of how to do this, you might find this documentation helpful. The Express server that comes with this early draft project is able to be extended to serve as an API and more, but is not required for a static deployment.

Docker

You can find Chronas as well on Docker aumanjoa/chronas-map

Dockerfile

To run the docker use docker run -p -d 80:80 aumanjoa/chronas-map

Thank You

This project wouldn't be possible without help from the Chronas community, so I'd like to thank especially those who backed the Kickstarter campaign!