jupl / arabica

JavaScript Boilerplate

Arabica _{JavaScript Boilerplate}

Table of Contents

• About
• Prerequisites
• Getting Started
• Project Structure
• Tasks
• Project Resources

About

This is a boilerplate project for developing client-side code using JavaScript and Babel.

^{Back to top}

Prerequisites

• Node.js (6.x minimum required)
  • npm CLI is usually included with Node.js
• Yarn (recommended)
• Editor with support for JavaScript (see Tern for code analysis if editor does not include it), ESLint, and EditorConfig

^{Back to top}

Getting Started

1. Clone/download this repository.
2. Install dependencies using npm or Yarn:

• npm install
• yarn

3. Start running tasks as described below in the tasks section.

^{Back to top}

Project Structure

Overview

arabica/
├─ .webpack/   # Webpack build configuration builder
├─ assets/     # Static files to icnlude in builds
├─ coverage/   # Code coverage reports
├─ dist/       # Result build data from build tasks
├─ src/
│  └─ app.js # Application entry point
├─ .babelrc          # Babel configuration
├─ .eslintrc         # ESLint configuration
├─ esdoc.json        # ESDoc configuration
├─ hot─server.js     # Source code for local development server
├─ package.json      # Configuration, tasks, and dependencies
├─ setup-tests.js    # Source code to run before execution of tests
├─ webpack.config.js # Webpack build configuration
└─ yarn.lock         # Dependency pinning from Yarn

Entry Points

When JavaScript code is built, any files directly inside the src/ directory are used to create the output files. The boilerplate currently generates app.js, as there is a single entry point inside src/. (src/app.js) If there are more than one entry points more files generated as well as an additional file common.js, which contains shared code across all entry points. common.js must be loaded before you load an entry point. You can see what gets generated by running the build:dev/build:prod task. (see the tasks section)

Other Files

*.test.js,

Tests for components/domains/logic/etc. If code needs to be run before tests are executed see setup-tests.js Some guides on tests include:

• Jest

__snapshots__

Generated files/directories when using Jest's snapshot feature. These files should be left to Jest and not touched manually.

^{Back to top}

Tasks

Tasks can be executed in the following manner:

npm run [command]  # npm
yarn run [command] # Yarn

Examples:

npm run build:dev
yarn run lint

server:hot

Start a local development server in port 3000 by default. To use another port have the environment variable PORT set to a number or modify hot-server.js. This task is also available as an alias to server. The following is provided in the development server:

• Hot reloading

build:dev

Build application and include assets into a packaged build in the dist/ directory. This build is not minifed and includes source maps. Ideal for development.

build:prod

Build application and include assets into a packaged build in the dist/ directory. This build is minified (with dead code elimination) and does not include source maps. Ideal for production. This task is also available as an alias to start. (npm start, yarn start)

build:docs

Build detailed code documentation in the docs/api/ directory.

test

Run tests once using Jest. For more information visit the documentation for Jest.

test:watch

Run tests once and rerun on changes using Jest.

lint

Verify that code is valid using ESLint. For customzation modify .eslintrc.

lint:fix

Like lint task, but automatically fixes certain linting violations.

coverage

Like test task, but also collects code coverage, which becomes available in the coverage/ directory.

coverage:watch

Run converage once and rerun on changes using Jest.

^{Back to top}

Project Resources

• Language
  • Babel
  • ESLint
• Libraries
  • normalize.css
• Testing
  • Jest
• Development Tools
  • ESDoc
• Build Tools
  • Webpack

^{Back to top}