Repository files navigation

This is an opinionated isomorphic preact and redux starter-kit.

It includes all your favourite libraries and can be as little as24kB but most likely less than80kB 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

• a PWA (progressive web app)
• a SPA (single page application) that can be serverless and hosted on a CDN
• a SSR (server-side rendered) app with SEO (search engine optimization) support
• a serverless SSR (running in AWS Lambda and static resources in AWS S3)

preact isreact in only3kB

We also addedpreact-compat in case you need it, otherwise just get rid of it.

Routing done right with components.ConnectedRouter on the client andStaticRouter on the serverallow for perfect isomorphic routing.

Single immutable state, reducers and actions to structure and master even the biggest apps.

Userambda to mutate state - this allows your state to be POJO (Plain Old JavaScript Objects)and make development so much more fun.

Reactive programming of your actions allows for easy composition of even the most complexasync 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.

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.

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 achievehighly optimized builds.

With a huge thanks to @developit we can now run the preact app on the server without the needfor 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 performsgreat.

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 ofindex.client.js.

Isomorphic modular lightweight preact material design based on thematerial-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 reallyencourage you to embrace GraphQL.

If you are usingGraphQL andRedux you are most likely to normalize anyGraphQL Queryinto anormalized entity store.

To make this as simple and easy to use as possible we provide a script that can extract allGraphQL Entities from a givenGraphQL Endpoint and automatically create theEntity Reducersfor you.

You run this script initially and then whenever theGraphQL Schema is about to change.

If you don't make any manual changes to any of theEntity Reducers you can just run

npm run graphql:override

This will generate and override yourEntity Reducers automatically and you are ready to go.

If you are extending theEntity Reducers with additional functionality you must run

npm run graphql:merge

This will generate all theEntity Reducers in thescripts/graphql/generated folder.

You can now manually merge the generated

...Reducer.js files intosrc/entities

and

types.json file intosrc/graphql

without losing any of the extensions you've previously added to theEntity Reducers.

• Either provide your own ssl certificates of change the code to use http instead of https!
• To get a response from the GraphQL API you need to run your own GraphQL server,adjust the query and create theEntity Reducers (see above for details)!Otherwise just replace it with your ordinary REST APIs.
• Fork and clone this repo.
• npm install

You might want to change the following parameters within the dev and build run-commands:

• BASEURL will be injected into theindex.html and therouter history
• PORT is the port to be used by the development server
• HOST is 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 withhttp orhttps. Production is served only withhttps.

To do so you have to provide your own SSL certificates ascertificates/domain.key andcertificates/domain.cert.

Make sure you don't check those in to GIT!!!

npm run dev runs the development version viahttp

npm run dev:secure runs the development version viahttps in which case you have to provideyour own ssl certificate in thecertificates folder.

npm run build

node dist/server/main

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 theROOT_STATE_READY_TO_RENDER action has been dispatched.

This example dispatches this action once the firstGraphQL Query had a successful response.

You can replace that easily with your own custom logic. Just make sure you dispatch theROOT_STATE_READY_TO_RENDER actionwhen you are ready to render and serve the site to the client.

To build for a real serverless SSR just runnpm run build:serverless

• This will give you aclient folder.
  • Create aS3 bucket that will host yourstatic resources.
  • Create a subfolder called_ within that bucket.
  • Copy everything within theclient folder into the_ subfolder in theS3 bucket.
• This will also give you the server files.
  • Create aLambda function.
  • Zip theindex.js andclient folder together into an archive and upload it into yourLambda function.
• Now create aCloudFront Distribution with 2origins.
  • Thedefault origin will point to theAPI Gateway Endpoint that calls theLambda Function.
  • The resourceorigin uses the_ path to point to theS3 static resources bucket.

If you have no idea what all this is or you like more details, please contact me. I haveterraform scripts that buildall of this infrastructure automatically.

You are very welcome to report issues, PRs and become a contributor.