A React starter repo, first assembled in 2017, featuring:
Auto-deployed from Master to demo at: https://react-starter-17.netlify.com
- React
- Redux
- React Router 4
- Webpack 2 with route chunking, vendor chunking
- Offline support and caching with sw-precache
- SASS compilation to static file, loading in head of HTML
- Hot Realoading of Components and CSS
- Sentry.io reporting with Raven
- Google Analytics
- Async actions using fetch and redux-thunk
- React Helmet for metadata
npm install
npm start
npm run prod
Static files such as images, robots.txt, manifest.json, etc are stored in the /static folder. The contents of this folder are copied to the /dist folder during the production build. The contents, not the folder itself, are copied, so that robots.txt, etc will be at the top-level of the deployed application.
After lots of thought and research, this starter pack does not support server-side rendering. A mixture of challenges with async data loading on server/client, slow performance of renderToString, and complexities with sw-precache implementation led me to choose not to implement SSR.
Furthermore, with sw-precache, after first load (in Chrome and Android), the app shell is available and first paint occurs almost instantly. So, while SSR would be really nice for first-paint, the offline cache provides similar benefits without the server costs and code complexity.
For SEO, I choose to pre-render (Netlify offers pre-rendering for free on open-source applications).
React Fiber may bring better renderToString performance, streaming, etc - at which point I may revisit the question.
Be sure to update the following locations
- Metadata and titles in
webpack/template.html - swPrecache names and details in
webpack/webpackConfigProd.js - Titles and repos in
package.json - Details in
static/manifest.json
Raven is useful for capturing client-side errors.
To configure: Set the Raven-URI in app/index.js
To remove: Remove the Raven-URI line in app/index.js and remove the script import in webpack/template.html
To configure: Set the id on BrowserRouter in app/index.js with your GA id
To remove:* Uninstall react-g-analytics from npm packages. Use { BrowserRouter } from 'react-router-dom', rather than from 'react-g-analytics'. Remove the id parameter from BrowserRouter component in app/index.js