@lcooper/app-scripts

Usage

Create a new app using @lcooper/create-app, or follow the instructions below to set up manually

First, install @lcooper/app-scripts as a dev dependency:

npm i @lcooper/app-scripts --save-dev

or using yarn:

yarn add @lcooper/app-scripts --dev

Then add the following scripts to your package.json:

{
  "scripts": {
    "build": "app-scripts build",
    "dev": "app-scripts dev"
  }
}

Note: eslint must be configured in your workspace

Configuration

By default, projects are assumed to be single page applications and must include the following files to build correctly:

• src/index.js - the javascript entry point for your app
• src/index.html - the page template for your app

This behavior can be configured by including an app.config.js file in the root of your project. The example below represents the default configuration:

module.exports = {
    entry: 'src/index.js',
    html: 'src/index.html',
};

To create a multi page application, add the pages property to your app.config.js file:

module.exports = {
    entry: 'src/index.js',
    html: 'src/index.html',
    pages: {
        admin: {
            entry: 'src/admin.js',
            html: 'src/admin.html',
        },
        about: 'src/about.js',
    },
};

The app.config.js file in the example above represents an application with three pages: index, admin, and about. Since no page template is specified for the about page, the src/index.html base template will be used as a fallback.

Additional config options

| Field | Default | Description | |:-------------|:--------:|:---------------------------------------------------------------------------------------------------| | source | 'src' | source file directory, or an array of source file directories | | output | 'dist' | webpack output.path directory | | publicPath | '/' | webpack output.publicPath value | | target | 'web' | webpack target environment |

Scripts

build

Builds the app in production mode into an output folder named dist. Files are minified and file names are hashed.

dev

Runs the app in development mode using a development server that runs on port 3000 by default.

Errors and warnings will be printed in the console, and displayed in the browser via an error overlay.

react-refresh is integrated via @pmmmwh/react-refresh-webpack-plugin.

Middleware

The hot reloading and error overlay functionality of the dev script is also exposed as middleware that can be integrated into an express server. It can be imported from @lcooper/app-scripts/middleware.

Ensure that the middleware instance is properly closed, as demonstrated in the following example:

const express = require('express'),
    middleware = require('@lcooper/app-scripts/middleware');

const app = express(),
    // middleware instance
    devMiddleware = middleware(),
    // function to properly close middleware
    closeMiddlware = () => {
        devMiddleware.close(() => {
            process.exit(1);
        });
    };

app.use(devMiddleware);

// listen on port 3000
const server = app.listen(3000, () => {
    console.log('Express app is listening on port 3000');
});

server.on('error', closeMiddlware);

process.on('SIGINT', closeMiddlware);
process.on('SIGTERM', closeMiddlware);

Related

@lcooper/create-app - Tool for generating React apps that use this package.
@lcooper/dev-server - Development server with HMR.
@lcooper/webpack-messages - Webpack error and warning message formatter.
@lcooper/dev-overlay - Overlay that displays errors and warnings in the browser.