Once that npm ci is stable and installable with a node version let's give it a try in codeship.

References:
http://blog.npmjs.org/post/171556855892/introducing-npm-ci-for-faster-more-reliable
https://github.com/npm/npm/releases

Thanks @neo for the suggestion

Improve redux+react-router structure based on the current generator

To manage the errors in the sites we have a couple ways to do it. The simpler way is to filter all of them using window.error and componentdidcatch and decide what to do with them.

A more robust is to use a monitoring library but it adds more async code to the page. I don't like at least is need it

Add Image lazy load by default

The project is not using this library currently.

Extensive readme

Add this default components

Like everyone knows Preact is just ~3kb compared with the ~45kb of React. For small projects that don't require all the React architecture, we have Preact as a solution. There are more alternatives.

https://github.com/developit/preact/wiki/Differences-to-React

Note: We can think too about adding a prompt to this generator to switch to Preact, depending on how complex may be, will be better to keep it simple and just fork it and create another generator

Add default component

Thanks to @amelierosser for proposing it. It will improve the amount of time needed to build

Link: https://www.npmjs.com/package/autodll-webpack-plugin

Here we have a couple strategies to do:

1. Don't re-compress assets
2. Use the AutoDllPlugin (already an issue #39)
3. Move the used dev-dependencies that we actually use into dependencies and run the production build only with the dependencies (npm install --production)

Currently gsap-lite-promise is a github project, it must change the name to gsap-promisify and upload the module to npm

When the application grows and becomes more complex, sometimes the actions and reducers for asynchronous pages are really large. In that scenario, we want to include them also in the async chunk and load them asynchronously.

Currently, we have control only over a few polyfills, the idea is to extract all the polyfills of the app and load them just if the browser needs them.

Base link

Add base link component with the best practices.

Markup

Use <a class="" label="" href=""></a>

Accessibility

Must include label

Performance

1. The external links (target="_blank") must include rel="noopener"
2. The external link will include a prefetch tag when the user over the link. (<a rel=prefetch href=''></a>)

Once public https://github.com/Jam3/eslint-config-jam3 it's just extend it from there

Add wiki with info related to the generator.

Have in mind that the wiki won't be cloned/generated, just the README

https://polished.js.org/

Prefetch for chunks
Preload for assets above the fold (fonts)

https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf
https://github.com/GoogleChromeLabs/preload-webpack-plugin
https://github.com/lwd-technology/react-app-rewire-preload-plugin

Add default component

Put package.json into .prettierignore
npm format the package.json differently than prettier, they would keep fighting with each other.

There are many tools that generates it, because the app is not server rendered we need to rendered first before run the tools, there are many ways like react-snapshots or react-snap

• i think we can reuse unsupported-webpack.config.js from prj-fb-messenger-redesign to generate the bundle
• as well as unsupported-utils.js
• we might want to separate device-matrix.json into supported and unsupported sections, sometimes it necessary to specify which browsers are unsupported (like IE browsers, .etc), while everything else can fall through as a maybe supported

HTTPS = true

https://webpack.js.org/configuration/dev-server/#devserver-proxy

Create npm packages from reusable libraries in utils

Once is published https://github.com/Jam3/stylelint-config-jam3 it's just extend from there

1. All the right metatags
2. Socials
3. Favicons
4. Important attributes (lang, namespaces)
5. SEO tags
6. dns-prefetch(s)
7. canonical links
8. no-script info

Import video player component from old generator

Load just the App shell+above the scroll and load the rest async - not blocking the rendering

The libraries/files in src/utils must be documented with JSDoc

To help to work on creative projects.

Create generator.jam3.net

Base button

Add base button component with the best practices.

Markup

Use <button></button>

Accessibility

Include aria-label

Create sassdoc page with global mixins.

Reference: http://sassdoc.com/

There are tons of CSS naming conventions with really good reasons behind them. I like BEM but I am open for a discussion to decide which one to use.

Links:

1. https://css-tricks.com/methods-organize-css/
2. https://en.bem.info/

Use SVG Icons as component is more efficient (60% time savings) than use them inside a dangerouslySetInnerHTML .

Use svgr can help everyone to create stateless components.

References:

1. https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

Links:
https://github.com/smooth-code/svgr

The idea is to start with a simple server rendering that will render only the main layout (App shell), this includes navbar, footer, hamburger menu and the rest will be lazy loaded (or wait for React to render the components).

Import this script from old generator

Evaluate if is needed to use a critical-css solution or just with the common css bundle is ok

Add this as extra service for our generated app, the apps are not integrate it

react-app-rewire-styled-components

Create pipeline where:
2. Include slack notification
3. Run unit-tests, if they are added
5. Run Pagespeed (async)
6. Run Lighthouse (async)
7. Run Page Validator (html-validator, needs react-snap or similar solution)
8. Unused CSS
9. Run Security tests (security scripts, npm packages review)