Webpack-MPA-TS
Opinionated multiple page application setup with Webpack using SASS, PostCSS, ES2017, TypeScript, PNG & SVG Sprites and more.
This boilerplate is suitable for static web applications, WordPress websites, etc.
Visitor stats
Code stats
Dependencies
In order to use this setup you need to have installed the following dependencies:
- Node - min v8.9.4 - LTS recommended
- NPM - min v5.6.0 or
- Yarn - min v1.3.2
- Bash terminal (Default on OSX/Linux, GitBash or similar on Windows)
Default setup
The default setup uses PHP files, but you can easily switch to a file format of your choice.
Also, you can always switch to another file/folder structure if the current one does not suit you.
Just keep in mind that the styles should be located in assets/styles
and the scripts should be located in assets/scripts
.
Zero config and fast installation
Navigate to your new project’s folder and execute the following command:
npx webpack-mpa-ts && npm i && npm start
This will install Webpack-MPA in your project folder and you will be able to start right away.
Download
You can download this setup directly and extract it.
or use NPM or Yarn to install it:
npm i webpack-mpa-ts
or
yarn add webpack-mpa-ts
Then navigate to the webpack-mpa-ts
folder and proceed with the rest of the instructions.
Global installation
It is possible to use the CLI tool included in Webpack MPA TS. In order to do this you must install Webpack MPA TS globally:
npm i webpack-mpa-ts -g
or
yarn global add webpack-mpa-ts
The wmpats
binary is now available for you to use.
Go to your new project folder and execute
wmpats
Your new project is setup!
Install dependencies
yarn
or
npm i
Develop
yarn start
or
npm start
Build
yarn build
or
npm run build
Details
-
SCSS stylesheets preprocessing
- SCSS entry point is
main.scss
file located inassets/styles
- The whole stylesheets file/folder structure is up to you
- ITSCSS boilerplate used as a starting point.
- Glob import in SASS thanks to node-sass-magic-importer
- SCSS entry point is
-
PostCSS stylesheets postprocessing including:
- easy importing of non-sass files
- url rebase - locates and copies assets from
node_modules
- postcss-utilities - allows usage of utility mixins such as
clearfix
- flexbox bugs - fixes common flexbox issues on Internet Explorer
- css minification - minifies the bundles stylesheet
- automatic vendor prefixes
“Write your CSS rules without vendor prefixes (in fact, forget about them entirely)”
-
PNG Sprite generating using Webpack SpriteSmith The default setup includes retina sprite support which means that you should provide a retina version of each png icon.
If you do not wish to use the retina sprite, comment the
@include retina-sprites($retina-groups);
statement inmain.scss
file.In order to use the PNG sprite, you need to do so by adding the relevant icons in your markup:
<i class="ico-home"></i>
The class name corresponds to the name of the PNG file.
-
Latest Typescript support
- Minification of the bundled file
- Source maps
-
Automatic browser reload using BrowserSync
- The setup assumes that you have a web server (MAMP, XAMPP, etc) installed.
- If you wish to use a proxy in browsersync you can do it using the
url
CLI argument like this:
yarn start --env url=http://your.app
or
npm start --env url=http://your.app
If you do not have a web server installed, then the files can be served via the browser-sync built-in server. In order to use this you need to pass a new CLI argument
server
like this.yarn start --env server
or
npm start --env server
-
SVG Sprite generating using spritesh
All svg files located in
assets/images/svg
are merged into a singlesprite.svg
file indist
directory.This action is performed each time the
start
command is invoked.In order to use the SVG sprite you first need to include it in your markup. You can do so in several ways:
- If you’re using PHP files, include it in each of your PHP files:
<?php include_once('assets/dist/sprite.svg'); ?>
- If you’re using HTML files, paste the content of the SVG sprite in each of your HTML files.
- If you’re using another templating method (posthtml include, handlebars, ejs, etc) you need to do so according to its documentation.
It is preferred to include the SVG sprite right after your opening
<body>
tagIn order to add an SVG icon in your markup, you can do so by using the SVG
<use>
tag:<svg class="svg-home"> <use xlink:href="#svg-home"></use> </svg>
- If you’re using PHP files, include it in each of your PHP files:
-
All front-end assets are stored in an auto-generated
dist
folder.
Assets
The assets
folder contains several folders:
images
- contains several folders too:favicon
- contains all icons variationssprite
- contains png sprite’s partssvg
- contains svg sprite’s partstemp
- contains content images
scripts
- contains the JS modulesstyles
- contains the SASS stylesheets
Each start
command regenerates the contents of the dist
folder.
Supported Browsers
This setup uses Browserslist to target browsers.
The default list of supported browsers is listed in the package.json
file:
{
"browserslist": ["> 1%", "last 2 versions"]
}
This means that supported browsers vary based on current usage data and current browser versions.
In general, this setup supports the two most recent versions of all browsers.
Scripts
There are several scripts defined in the package.json
file:
{
"build": "webpack --mode=production",
"start": "webpack --watch --mode=development",
"html": "php index.php > index.html",
"critical": "critical index.html > assets/dist/critical.css",
"rm-html": "rm index.html",
"pwa": "create-pwa --icon=\"./assets/images/favicon/icon.png\"",
"prod": "yarn build && yarn html && yarn critical && yarn rm-html"
}
Here is a bit more about what each script does:
build
: Builds the production version of the javascript and css bundles, regenerates PNG and SVG sprites.start
: Starts the development sequence, regenerates PNG and SVG sprites, opens your default browser and watches for changes.html
: Converts yourindex.php
file toindex.html
.critical
: Using theindex.html
extracts the critical css and generates acritical.css
file in theassets/dist
folder which is then inlined in theindex.php
file.rm-html
: Deletes theindex.html
file.pwa
: Generates boilerplate files for a PWA. More info here.prod
: Runs 1, 4, 5, 6. (In this exact order).
In order to use the ability to generate critical CSS you must have the php
binary exposed in your bash terminal.
More about PHP’s commandline usage can be found here.
Public vs. private projects
This starter boilerplate is licensed under the MIT open source license and is publicly available.
If you intend to use it to create a private and closed source project, please make sure to delete the license
field in the package.json
file and add "private": true
in the same file.
This will make sure that you don’t accidentally use an open source license for your private/closed source project.
LICENSE
MIT