angeliquejw / mixpack

A mixed TypeScript/JavaScript Webpack boilerplate with Express.

MixPack

A mixed TypeScript/JavaScript Webpack boilerplate with Express. Click here to see it live on Netlify.

Introduction

Mix and match TypeScript and ES6+ JavaScript alongside Sass and Next-Gen CSS using Express.

Why Use MixPack?

Mixpack sets out to provide an all-in-one Webpack boilerplate solution using core frontend technologies and sensible optimization defaults.

Fork and Launch

Installation

Install dependencies:

    npm install

Usage

Development server

Run dev environment:

    npm run dev

Navigate to http://localhost:8080/

Production build (serverless)

Build and serve for production:

Note: Configure this command in your Netlify account.

    npm run build

Other commands

Build and serve for production (locally):

Note: Point to server: './scripts/server-prod.js', in webpack.server.config.

    npm run build
    npm run serve

Run all tests:

    npm run test

Run all tests with additional coverage information:

    npm run coverage

Visualize Webpack output:

Note: First, make sure debug: true, is disabled in babel.config.js.

    npm run analyze

Create webp images:

    npm run optimize

Features

• Transpile TypeScript, Next-Gen JavaScript, Sass, and Next-Gen CSS
• Testing support for a mixed JS/TS environment using Jest
• Linting support for a mixed JS/TS and CSS/Sass environment using Eslint and Stylelint
• Integrates the Express + Webpack (Expack) boilerplate
• Includes an organized sass boilerplate
• Optimized Webpack configurations
• Includes code splitting examples

Dependency Deep-Dive

See the extended README

Mixpack for the Back End

See the backend README

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Credits

• Ben Grunfeld's Expack
• Amina's Jest mock examples
• Mark Tse's Netlify Express
• Hugo Giraudel's Sass Boilerplate