This is an opinionated isomorphic preact and redux starter-kit.
It includes all your favourite libraries and can be as little as
24kB but most likely less than
80kB for the client to load your entire app!
It depends on how many of the great stuff you actually need for your app.
The goal is to use the same code to achieve
react in only
We also added
preact-compat in case you need it, otherwise just get rid of it.
Routing done right with components.
ConnectedRouter on the client and
StaticRouter on the server
allow for perfect isomorphic routing.
Single immutable state, reducers and actions to structure and master even the biggest apps.
and make development so much more fun.
Reactive programming of your actions allows for easy composition of even the most complex async action stream flows. This can replace all the other redux middleware you used so far.
Internationalization that uses standards and works client and server-side. With support for all the stuff you need like genderization, pluralization, date and time.
There are even some helper scripts to export/import PO files to communicate with your translators.
npm run po:export
This will extract all translations from your code and merge them into PO files. It will NOT override already existing translations but only add new translations to the PO files. You then send the PO files to your translator and he will use his tools to only translate the new untranslated translations.
npm run po:import visa
This will import all translations from the PO files within the given whitelabel. You do this after you received all translations back from the translator and before you build.
If you are building just for your own company, then just have only a single whitelabel and that's totally fine.
But we also want to enable you to build for multiple whitelabels. This allows you to have different translations for different whitelabels. It is a very common thing in enterprise applications and translations really differ between whitelabels (believe me).
Obviously the latest and greatest webpack with all the bells and whistles to achieve highly optimized builds.
With a huge thanks to @developit we can now run the preact app on the server without the need for complex pre-render state calculations and render-to-string.
This gives us very clean code that is almost identical on server and client-side and performs great.
You can find all the details here.
100/100 Lighthouse rating if you decide to use this repo to build a PWA.
Otherwise just get rid of the service worker at the end of
Isomorphic modular lightweight preact material design based on the material-components-web sass styles.
Replace it with your own front-end components if you like. Just make sure they are isomorphic.
You can replace this easily with whatever data fetching technology you like but we really encourage you to embrace GraphQL.
If you are using
Redux you are most likely to normalize any
normalized entity store.
To make this as simple and easy to use as possible we provide a script that can extract all
GraphQL Entities from a given
GraphQL Endpoint and automatically create the
You run this script initially and then whenever the
GraphQL Schema is about to change.
If you don't make any manual changes to any of the
Entity Reducers you can just run
npm run graphql:override
This will generate and override your
Entity Reducers automatically and you are ready to go.
If you are extending the
Entity Reducers with additional functionality you must run
npm run graphql:merge
This will generate all the
Entity Reducers in the
You can now manually merge the generated
...Reducer.js files into
types.json file into
without losing any of the extensions you've previously added to the
Entity Reducers(see above for details)! Otherwise just replace it with your ordinary REST APIs.
You might want to change the following parameters within the dev and build run-commands:
BASEURLwill be injected into the
PORTis the port to be used by the development server
HOSTis the host to be used by the development server
"build:client": "cross-env NODE_ENV=production BABEL_ENV=production TARGET=web BASEURL=/ webpack", "build:server": "cross-env NODE_ENV=production BABEL_ENV=production TARGET=node BASEURL=/ webpack", "dev": "cross-env NODE_ENV=development TARGET=web BASEURL=/ PORT=8080 HOST=localhost webpack-dev-server --inline --hot --progress", "dev:secure": "cross-env NODE_ENV=development TARGET=web BASEURL=/ PORT=8080 HOST=my-domain.com webpack-dev-server --inline --hot --progress --https",
You can run development with
https. Production is served only with
To do so you have to provide your own SSL certificates as
Make sure you don't check those in to GIT!!!
npm run dev runs the development version via
npm run dev:secure runs the development version via
https in which case you have to provide
your own ssl certificate in the
npm run build
This serves via https and requires you to provide your own certificates since it is intended to be for production.
The server will only render and serve the site to the client when the
ROOT_STATE_READY_TO_RENDER action has been dispatched.
This example dispatches this action once the first
GraphQL Query had a successful response.
You can replace that easily with your own custom logic. Just make sure you dispatch the
when you are ready to render and serve the site to the client.
To build for a real serverless SSR just run
npm run build:serverless
S3bucket that will host your
_within that bucket.
clientfolder into the
_subfolder in the
clientfolder together into an archive and upload it into your
CloudFront Distributionwith 2
default originwill point to the
API Gateway Endpointthat calls the
_path to point to the
S3static resources bucket.
If you have no idea what all this is or you like more details, please contact me. I have
terraform scripts that build
all of this infrastructure automatically.
You are very welcome to report issues, PRs and become a contributor.