Local Development Setup

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• package.json
• webpack.config.js
• .babelrc
• .eslintrc.js
• src/index.js
• src/components/App.js

This document outlines the local development environment for the 1111 project. The project is a modern web application built using React. The development setup relies on a toolchain consisting of Node.js for package management, Webpack for asset bundling, Babel for JavaScript transpilation, and ESLint for ensuring code quality.

Setting up the local environment involves installing dependencies via npm and using predefined scripts to run a development server, build the application for production, or run tests. The configuration files in the repository root define the behavior of these tools.

Prerequisites

A local installation of Node.js and the npm (or yarn) package manager is required to install dependencies and run project scripts.

Sources: package.json

Installation

To set up the development environment, clone the repository and install the required Node.js modules using npm. This command reads the dependencies and devDependencies from package.json and downloads them into the node_modules directory.

npm install

The project's dependencies are categorized as follows:

Category	Description
dependencies	Libraries required for the application to run in production, such as react and react-dom.
devDependencies	Tools and libraries used only for development, such as Webpack, Babel, ESLint, and testing libraries.

Sources: package.json:11-41

Key Dependencies

The following tables summarize the main libraries used in the project.

Production Dependencies

Package	Version	Description
react	^16.13.1	The core library for building the user interface.
react-dom	^16.13.1	Provides DOM-specific methods for React.
react-router-dom	^5.2.0	Handles routing within the React application.

Sources: package.json:12-18

Development Dependencies

Package	Version	Description
webpack	^4.44.1	A static module bundler for modern JavaScript applications.
webpack-cli	^3.3.12	Command-line interface for Webpack.
webpack-dev-server	^3.11.0	Runs a local development server with live reloading.
@babel/core	^7.11.4	The core Babel compiler for transpiling ES6+ to ES5.
eslint	^7.7.0	A tool for identifying and reporting on patterns in JavaScript code.
sass	^1.26.10	A CSS preprocessor used for styling.

Sources: package.json:20-41

Core Development Scripts

The package.json file defines scripts for common development tasks. These are executed using npm run <script_name>.

Script	Command	Description
start	webpack-dev-server --open	Starts the development server, bundles the application in memory, and opens it in a new browser tab.
build	webpack --mode production	Creates a production-ready build in the dist directory.
test	echo "Error: no test specified" && exit 1	A placeholder for a test command. Currently, no tests are configured.

Sources: package.json:7-10

The start command initiates the following workflow:

This diagram shows how the npm start command launches the Webpack development server for a live-reloading development experience.

Sources: package.json:8, webpack.config.js

Build & Bundling Process (Webpack)

Webpack is configured in webpack.config.js to bundle all project assets, including JavaScript and SCSS files, into static files that can be served to a browser.

Sources: webpack.config.js

Webpack Configuration Overview

Configuration Key	Description
entry	The main entry point for the application bundle (./src/index.js).
output	Specifies the output directory (dist) and filename (bundle.js) for the bundled code.
module.rules	Defines how different file types should be processed. This includes using babel-loader for JavaScript/JSX and a chain of loaders (style-loader, css-loader, sass-loader) for SCSS files.
plugins	Configures Webpack plugins. HtmlWebpackPlugin is used to generate an index.html file in the dist folder with the bundled JavaScript automatically injected.

Sources: webpack.config.js:6-45

Asset Processing Flow

The following diagram illustrates how Webpack processes source files into a final distributable bundle.

This diagram shows that index.js is the entry point, which imports other components and styles. Webpack uses loaders to process these files and plugins to generate the final index.html with the bundled script.

Sources: webpack.config.js:6-45, src/index.js:1-4

Code Transpilation & Linting

The development environment uses Babel to support modern JavaScript features and ESLint to maintain code consistency and quality.

JavaScript Transpilation (Babel)

Babel transpiles modern JavaScript (ES6+) and JSX into code that is compatible with most browsers. The configuration is located in the .babelrc file.

It uses two main presets:

• @babel/preset-env: Automatically determines the Babel plugins and polyfills you need based on your supported environments.
• @babel/preset-react: Transforms JSX into React.createElement calls.

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

Sources: .babelrc:1-8

Code Quality (ESLint)

ESLint is configured in .eslintrc.js to enforce a consistent coding style and catch common errors. The configuration extends the popular airbnb style guide and integrates prettier to handle code formatting.

Key aspects of the ESLint setup:

• Extends: airbnb, plugin:prettier/recommended.
• Plugins: react, jsx-a11y, import, prettier.
• Environment: Configured for browser and ES2021 environments.
• Rules: Custom rules can be added to override or supplement the base configurations.

Sources: .eslintrc.js:1-12