that-react-app-you-want icon indicating copy to clipboard operation
that-react-app-you-want copied to clipboard

Published 20 hours ago • verified publisher icon jmahc
→

Metadata

That react app you always wanted: [email protected], [email protected], postCSS, purifycss, dll's and code splitting examples, bregh. Highly opinionated but you better like it.

that-react-app-you-want

Build Status Dependencies devDependencies Status

license All Contributors semantic-release

Watch on GitHub Star on GitHub Tweet

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 [email protected].

Pick your poison

You even have options to decide what you want to use!

What do you want to see from this?

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!

Getting started

What do you need? Linux/macOS or a Windows machine and yarn.

Linux & macOS Instructions

Steps for you yarn losers:

  1. yarn - Install the dependencies.
  2. yarn run dev-vendor - Required and allows for quicker development builds due to the DLL's generated.
  3. yarn run start or yarn run dev - start development server.
  4. yarn run build - build for production.

OPTIONAL

  • yarn run clean-all - Removes any production-built files, DLL files, installed dependencies and any lock files.
  • 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.

Windows Instructions

Steps for you yarn losers:

  1. yarn - Install the dependencies.
  2. yarn run dev:vendor - Required and allows for quicker development builds due to the DLL's generated.
  3. yarn run start or yarn run dev - Starts the development server.
  4. yarn run build:win - Builds the application for production.

OPTIONAL

  • yarn run clean:all - Removes any production-built files, DLL files, installed dependencies and any lock files.
  • 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.

That engine version shit for you semantic manics

This is what I use. Feel free to change .node-version, .nvmrc and the package.json file's engines to suit your needs.

What is inside, though?

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.yml file

Todos

  • Implement testing
  • Add an optional redux branch. in progress as of August 4, 2017
  • Add an optional react-router v4 branch.
  • Add an optional authentication process.

Issues

  • None as of now :)

Open Graph

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!

Optional Functionality

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:

  1. Preload and Prefetch
  2. Favicon and Mobile Icon Generation

Preload and Prefetch

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:

  1. yarn add --dev preload-webpack-plugin.
  2. Don't forget to import the plugin at the top of the config/webpack.config.production.babel.js file, if not already:
...
import PreloadWebpackPlugin from 'preload-webpack-plugin'
...
  1. In config/webpack.config.production.babel.js, you will want to place this first inside of the plugins array:
...
plugins: [
  new PreloadWebpackPlugin({
    rel: 'preload',
    as: 'script',
    include: 'asyncChunks'
  }),
]
...
  1. This will take any async chunks generated by webpack that the browser will then preload before everything else!
  2. 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 prefetch solution.
  3. Any other questions about the plugin can be referenced by visiting the preload-webpack-plugin repository.

Favicon and Mobile Icon Generation

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.

  1. yarn add --dev favicons-webpack-plugin
  2. In config/webpack.config.commons.babel.js, you will want to comment/remove the favicons key:
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    // favicon: PATHS.favicon
    ...
  })
]
...
  1. 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'
...
  1. 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
    }
  }),
  ...
]
...
  1. For reference, visit the [favicons-webpack-plugin page].

License

MIT

Contributors

Thanks goes to these wonderful people (emoji key):


Jordan McArdle
💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

← Metadata

27
Stars
4
Forks
Watchers

Owner

verified publisher icon jmahc

Metadata

That react app you always wanted: [email protected], [email protected], postCSS, purifycss, dll's and code splitting examples, bregh. Highly opinionated but you better like it.

Back