Yeah, this is it.
What you've all been waiting for: that react app boilerplate shit that you seek day and night.
Here it is.
Right here.
You can have it.
Now featuring react@16.0.0.
You even have options to decide what you want to use!
- The master branch branch contains a simple react application.
- The redux branch branch implements redux alongside the simple react application.
Please fill free to open a card, or shoot me an email (found in the
package.json file) with tips, ideas and improvements!.
Hopefully you guys are enjoying it!
What do you need? Linux/macOS or a Windows machine and yarn.
Steps for you yarn losers:
yarn- Install the dependencies.yarn run dev-vendor- Required and allows for quicker development builds due to the DLL's generated.yarn run startoryarn run dev- start development server.yarn run build- build for production.
OPTIONAL
yarn run clean-all- Removes any production-built files, DLL files, installed dependencies and anylockfiles.yarn run clean-dist- Removes any production-built files.yarn run clean-dll- Removes any DLL files.yarn run clean-yarn- Removes any yarn-specific files, including dependencies.
Steps for you yarn losers:
yarn- Install the dependencies.yarn run dev:vendor- Required and allows for quicker development builds due to the DLL's generated.yarn run startoryarn run dev- Starts the development server.yarn run build:win- Builds the application for production.
OPTIONAL
yarn run clean:all- Removes any production-built files, DLL files, installed dependencies and anylockfiles.yarn run clean:dist- Removes any production-built files.yarn run clean:dll- Removes any DLL files.yarn run clean:yarn- Removes any yarn-specific files, including dependencies.
This is what I use. Feel free to change .node-version, .nvmrc and the
package.json file's engines to suit your needs.
Some really cool things:
webpack v3.10.0- prettier formatting
- webpack but you can use ES6 syntax
- chunks
- jsx
- Code-splitting aka importin' shit on the fly
- Tree-shaking for money-makers
- DLL's for faster build times
- PostCSS
- PurifyCSS
- hot reloadin'
- react
- (optional) favicon generaton
- (optional) preloading/prefetching
- and last but not least: generact! Check that out, it's dope.
- sample
travis.ymlfile
- Implement testing
- Add an optional
reduxbranch. in progress as of August 4, 2017 - Add an optional
react-router v4branch. - Add an optional authentication process.
- None as of now :)
Open Graph meta tags were added in the public/index.js file for your SEO
needs. Customize them inside the html-webpack-plugin instance located in the
config/webpack.config.commons.babel.js file, within the seo object!
These are optional decisions to made on your end, depending on the project required. I have chosen not to include them, as they vary from project-to-project.
Topics include:
Still looking to further optimize your web application's loading times?
Preloading might be for you. Maybe you've seen <link rel="preload"> or
<link rel="prefetch"> in a DOM's <head> before, maybe not. Because this
project utilizes code-splitting to produce chunks, preloading and prefetching
might be right up your alley! For this reason, I do have the plugin available in
the webpack.config.production.babel.js file. You should notice it at the top
of the plugin list.
Note: For more information, this Medium article can help distinguish your
needs for preload or prefetch.
Side note: This example utilizes preload but the syntax should be the same
for prefetch.
Here's what to do:
yarn add --dev preload-webpack-plugin.- Don't forget to
importthe plugin at the top of theconfig/webpack.config.production.babel.jsfile, if not already:
...
import PreloadWebpackPlugin from 'preload-webpack-plugin'
...- In
config/webpack.config.production.babel.js, you will want to place this first inside of thepluginsarray:
...
plugins: [
new PreloadWebpackPlugin({
rel: 'preload',
as: 'script',
include: 'asyncChunks'
}),
]
...
- This will take any async chunks generated by webpack that the browser will then preload before everything else!
- If you have a feeling that the async chunks won't be used too soon after the
page loads, then you may want to investigate a
prefetchsolution. - Any other questions about the plugin can be referenced by visiting the preload-webpack-plugin repository.
These generate favicons for all devices (android, iOS, and the favicon itself)
using a supplied image. Personally, I would be placed in the public directory.
That's why you might see the my-image.png and favicon.ico in there. It's up
to you which you choose to use.
yarn add --dev favicons-webpack-plugin- In
config/webpack.config.commons.babel.js, you will want to comment/remove thefaviconskey:
...
plugins: [
new HtmlWebpackPlugin({
...
// favicon: PATHS.favicon
...
})
]
...- In
config/webpack.config.production.babel.js, you will want to import the newly installed package at the top of the file:
...
import FaviconsWebpackPlugin from 'favicons-webpack-plugin'
...- In the plugins section of the same production file, you will add this as one of the first plugins:
...
plugins: [
new FaviconsWebpackPlugin({
logo: PATHS.image,
prefix: 'icons-[hash]/',
emitStats: false,
statsFilename: 'iconstats-[hash].json',
persistentCache: true,
inject: true,
// (see https://github.com/haydenbleasel/favicons#usage)
background: '#fff',
title: 'that-react-app-you-want',
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: false,
favicons: true,
firefox: true,
opengraph: true,
twitter: true,
yandex: false,
windows: false
}
}),
...
]
...- For reference, visit the [favicons-webpack-plugin page].
MIT
Thanks goes to these wonderful people (emoji key):
 Jordan McArdle 💻 📖 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!