Contentful demo

Developemnt

yarn
yarn run dev

Password protecting

By setting a PASSWORD_PROTECT env variable, the server will ask the client to authenticate with basic auth. If the string contains a : it will be split and set the username as the first part and the password as the second part, e.g. Aladdin:OpenSesame. If no : is in the string (or it starts with a :), the username will be empty and the password the given string.

Single route development

If you’re working on a single route and don’t want to build the entire app you can do so by using the --route argument, for example:

> yarn run dev -- --route=about

about being the folder name of the targeted route (inside shared/routes). This can be very useful when the app gets bigger and rebuilds and HMR start to get slower.

Notes

When adding configuration values and environment specific values, use the project config
In development vendor DLLs are created (see devVendorDLL in config/values.js) to speed up builds, for large projects you can add your own deps there

Production build

yarn run build
yarn start

Updating from upstream

Make sure you have the upstream remote:

> git remote -v # should show..
...
upstream git@github.com:ueno-llc/starter-kit-universally.git (fetch)
...
# if not, run...
git remote add upstream https://github.com/ueno-llc/starter-kit-universally.git
git remote set-url --push upstream no_push # disable push to upstream

Then, update:

git fetch upstream
git merge upstream/master

# These are the usual conflicts
git rm -r -f shared/components/DemoApp
git checkout --ours package.json

Remote development

Now supports ngrok and other ways to access your development build.

# outside wifi
ngrok http 3000
CLIENT_DEV_PROXY=1 PUBLIC_URL=http://xxxxxx.ngrok.io yarn run dev
# or local network
HOST=192.168.123.456 PORT=3000 yarn run dev

Stricter development

For those so inclined, pre-commit linting hooks can be added by changing lint-stage in package.json to:

"lint-staged": {
  "*.{js,jsx}": "./node_modules/.bin/eslint",
  "*.{css,scss}": "./node_modules/.bin/stylelint"
}

Testing can be enabled by adding to scripts:

"test": "jest"

Measuring performance

At some point during your projects lifetime, it will suddenly become slow. It might be some silly dependency, missed configuration or the alignment of the stars. After suffering through long build times one time to many, you'll start tweaking and tearing stuff apart. While doing that it's nice to know if you're having any effect, so there are some scripts included to help with that, located in ./internal/performance.

Before starting, set PERFORMANCE=true in the env so the build spits out timings.

Measuring initial build times, runs the dev build, kills it, runs it again N times. When finished it writes the average of all the runs to stdout.

> chmod +x ./internal/performance/build.sh # allow execution
> ./internal/performance/build.sh
Running "yarn run dev" 5 times
2627.793
2697.435
4140.478
2911.944
2846.027

2175.239

Measuring hot reload rebuilds, runs the dev task and waits for changes that trigger rebuilds. When the script is interrupted (e.g. by ctrl+c) it writes the average of all runs to stdout.

> chmod +x ./internal/performance/hot.sh # allow execution
> ./internal/performance/hot.sh
Running "yarn run dev" watching for hot reloads
Build complete
794.079
518.700
500.460
492.716
^C
576.488

React, Universally

A starter kit for universal react applications.

About

This starter kit contains all the build tooling and configuration you need to kick off your next universal React project, whilst containing a minimal "project" set up allowing you to make your own architecture decisions (Redux/MobX etc).

NOTICE: Please read this important issue about the behaviour of this project when using react-async-component, which is by default bundled with it.

Features

👀 react as the view.
🔀 react-router v4 as the router.
🚄 express server.
🎭 jest as the test framework.
💄 Combines prettier and Airbnb's ESlint configuration - performing code formatting on commit. Stop worrying about code style consistency.
🖌 Very basic CSS support - it's up to you to extend it with CSS Modules etc.
✂️ Code splitting - easily define code split points in your source using react-async-component.
🌍 Server Side Rendering.
😎 Progressive Web Application ready, with offline support, via a Service Worker.
🐘 Long term browser caching of assets with automated cache invalidation.
📦 All source is bundled using Webpack v2.
🚀 Full ES2017+ support - use the exact same JS syntax across the entire project. No more folder context switching! We also only use syntax that is stage-3 or later in the TC39 process.
🔧 Centralised application configuration with helpers to avoid boilerplate in your code. Also has support for environment specific configuration files.
🔥 Extreme live development - hot reloading of ALL changes to client/server source, with auto development server restarts when your application configuration changes. All this with a high level of error tolerance and verbose logging to the console.
⛑ SEO friendly - react-helmet provides control of the page title/meta/styles/scripts from within your components.
🤖 Optimised Webpack builds via HappyPack and an auto generated Vendor DLL for smooth development experiences.
🍃 Tree-shaking, courtesy of Webpack.
👮 Security on the express server using helmet and hpp.
🏜 Asset bundling support. e.g. images/fonts.
🎛 Preconfigured to support development and optimised production builds.
❤️ Preconfigured to deploy to now with a single command.

Redux/MobX, data persistence, modern styling frameworks and all the other bells and whistles have been explicitly excluded from this starter kit. It's up to you to decide what technologies you would like to add to your own implementation based upon your own needs.

However, we now include a set of "feature branches", each implementing a technology on top of the clean master branch. This provides you with an example on how to integrate said technologies, or use the branches to merge in a configuration that meets your requirements. See the Feature Branches documentation for more.

Getting started

git clone https://github.com/ueno-llc/starter-kit-universally my-project
cd my-project
npm install
npm run dev

Now go make some changes to the Home component to see the tooling in action.

Docs

Contributors

Thanks goes to these wonderful people (emoji key):

_{Andrés Calabrese} 💻	_{Andrey Luiz} 💻	_{Alin Porumb} 💻	_{Benjamin Kniffler} 💻	_{Birkir Rafn Guðjónsson} 💬 🐛 💻 👀	_{Carson Perrotti} 💬 💻 📖 👀	_{Christian Glombek} 🐛 💻
_{Christoph Werner} 💬 🐛 💻 👀	_{David Edmondson} 💻	_{Dion Dirza} 💬 🐛 💻 📖 👀	_{Evgeny Boxer} 🐛 💻	_{Joe Kohlmann} 🐛 💻	_{Lucian Lature} 🐛 💻 👀	_{Mark Shlick} 💻
_{Ryan Lindskog} 💻	_{Steven Enten} 💬 🐛 💻 👀	_{Sean Matheson} 💬 🐛 💻 📖 💡 👀 ⚠️ 🔧	_{Steven Truesdell} 💬 🐛 💻 📖 ⚠️	_{Thomas Leitgeb} 🐛 💻	_{Tyler Nieman} 💻