https://github.com/wyqydsyq/unicycle
Universal PWA Cycle.js & Koa boilerplate with Webpack configured for ServiceWorker and HMR out of the box
https://github.com/wyqydsyq/unicycle
Last synced: 7 months ago
JSON representation
Universal PWA Cycle.js & Koa boilerplate with Webpack configured for ServiceWorker and HMR out of the box
- Host: GitHub
- URL: https://github.com/wyqydsyq/unicycle
- Owner: wyqydsyq
- License: mit
- Created: 2017-05-02T02:30:36.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T18:10:39.000Z (almost 3 years ago)
- Last Synced: 2025-04-30T05:45:10.789Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 913 KB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-cyclejs - wyqydsyq/unicycle ★6 - A boilerplate universal Cycle app running on a Koa.js server with HMR and ServiceWorkers via Webpack (Libraries / Boilerplates)
README
## **UNMAINTAINED***
This repo hasn't been maintained and most of the packages will be out of date, I may be releasing an update/replacement in coming months. Feel free to fork/use this as a boilerplate, but keep in mind most of the webpack/babel/typescript config will need to be rewritten when upgrading to newer versions
# Unicycle
Unicycle is a [Cycle.js](http://cycle.js.org/) boilerplate for universal (aka isomorphic) progressive web-apps, preconfigured with [HMR](https://webpack.github.io/docs/hot-module-replacement.html) and ServiceWorker via Webpack.
## Features
- Ready-to-go Webpack config with [HMR](https://webpack.github.io/docs/hot-module-replacement.html), ServiceWorker functionality is provided using the [`offline-plugin`](https://github.com/NekR/offline-plugin) for Webpack.
- Self-contained Koa.js HTTP server that can both serve static builds for a staging/production environment or serve a live build of your application for a development environment via Webpack dev-server & HMR middlewares
- A basic scaffold for a universal application. Includes:
- A HTML Boilerplate that wraps your client-side app's DOM with necessary `` and `<link>` tags to serve your UI via SSR
- A basic API example endpoint
- A basic page configured to make a request to the API endpoint mentioned above and display the result in the DOM, a good example to show your application behaving isomorphically and rendering the same result whether on the Server or Client, even if it needs to await data asynchronously.
- A basic page with a timer component utilizing `@cycle/time`, a good example to show `cycle-restart` doing it's thing and persisting your application state across HMR updates.
- Some sample routes that are passed to [`switch-path`](https://github.com/staltz/switch-path), including blacklisting of paths that shouldn't be handled by the Client.
# Limitations
- HMR is currently client-only. It would be awesome to have the server use HMR too but implementation of this needs to be ironed out. Just whacking the entire server in HMR breaks it for the client-side because changes to the client code will also be detected as changes to the server code (since the server imports the client for SSR), so if you change the client the server will restart causing the client running in your browser to disconnect from HMR and not get the seamless update.
## Getting Started
To make a static build and serve it via Koa:
```
npm run start
```
To start a Koa server serving a live build of your app via HMR:
```
npm run start:dev
```