Note: For future updates, please see Webpack Template - a new, updated version of Mixpack with a simplified file structure and better management of project dependencies.
A mixed TypeScript/JavaScript Webpack boilerplate with Express. Click here to see it live on Netlify.
Mix and match TypeScript and ES6+ JavaScript alongside Sass and Next-Gen CSS using Express.
Mixpack sets out to provide an all-in-one Webpack boilerplate solution using core frontend technologies and sensible optimization defaults.
Install dependencies:
npm install
Run dev environment:
npm run dev
Navigate to http://localhost:8080/
Build and serve for production:
Note: Configure this command in your Netlify account.
npm run build
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
- 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
See the extended README
See the backend README
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
MIT
- Ben Grunfeld's Expack
- Amina's Jest mock examples
- Mark Tse's Netlify Express
- Kitty Giraudel's Sass Boilerplate