moda-web-library

Node.js Web Prototype

Web prototype build with Node.js, React, Redux, React-Router v4, Redux-JsonApi.

Setup and run locally

1. Make sure you have node.js and yarn installed
2. Clone the repo
3. Run yarn install
4. Run yarn build to build the app
5. Run yarn start to start the Node server. You can reach it on http://localhost:9000/new You can disable prerendering with yarn start --prerender=false.
6. For development, run yarn dev to run the dev server. It will watch changes and hot reload. Open it on http://localhost:8080/new

Running tests

You can run all tests with yarn test. Run a specific test with yarn test [filePath].

---

Build the library package and use it in mojo (integration/staging/production)

1. Merge your PR and wait for the new release from semantic-release
2. Upgrade moda-web-library in your mojo PR and merge it

Build the library package and use it in mojo (sandbox)

1. Publish a pre-release (e.g. 1.0.0-pre.1) with npm publish --tag pre.
2. Update package.json in mojo with the new version and push your branch.
3. Your sandbox now should have the new version of moda-web-librar

Build the library package and use it in mojo (development)

1. Make sure you have yalc installed globally: npm install --global yalc
2. Run yarn library:watch
3. Run yalc add moda-web-library in mojo
4. Start the rails server
5. After you're done with development, run yalc remove moda-web-library in mojo

Fetching resources

For resource fetching we use Apollo. See their docs. For non-graphql endpoints, we use apollo-link-rest.

Generating types for Apollo

Run yarn apollo:types:generate to re-generate the Apollo types in src/generated_types.

Using the linter

Running the linter from console is as simple as running yarn lint. To autofix formatting errors, run yarn lint-fix.

Setting up linter in your editor

Most editors have plugins which can highlight lint errors in real time, and autoformat using jsPrettier. The setup is different for each editor, I will provide a guide for SublimeText v3.

1. Install package control
2. Install the following packages:
   • SublimeLinter
   • SublimeLinter-eslint
   • SublimeJsPrettier
3. If you would like to autoformat on save, turn on auto_format_on_save in Preferences -> Package Settings -> JsPrettier -> Settings - Default