| 1 | 
|
| 2 | [](https://opensource.org/licenses/MIT)
|
| 3 | [](https://www.npmjs.com/package/@platform/react.ssr)
|
| 4 | 
|
| 5 |
|
| 6 | A lightweight SSR (server-side-rendering) system for react apps bundled with ParcelJS and hosted on S3.
|
| 7 |
|
| 8 | <p> <p>
|
| 9 |
|
| 10 | #### Live Demo:
|
| 11 | https://ssr.platform.uiharness.com
|
| 12 |
|
| 13 |
|
| 14 |
|
| 15 | <p> <p>
|
| 16 |
|
| 17 | #### Highlights:
|
| 18 |
|
| 19 | - Store assets on [S3](https://aws.amazon.com/s3/) (or Digital Ocean [Spaces](https://www.digitalocean.com/products/spaces/)).
|
| 20 | - Serve entry HTML from server (immediate load from "server-side-render").
|
| 21 | - `307` redirect all other assets to S3/CDN (geo-edge cache).
|
| 22 | - Manage lifecycle with simple command-line tools:
|
| 23 | - Bundle and push to S3 via command-line.
|
| 24 | - Manage versioned releases (with simple roll-backs) across multiple sites/environments.
|
| 25 | (eg. `dev`, `staging`, `prod`)
|
| 26 |
|
| 27 | <p> <p>
|
| 28 |
|
| 29 |
|
| 30 |
|
| 31 | 
|
| 32 |
|
| 33 |
|
| 34 | ## Setup
|
| 35 |
|
| 36 | yarn add @platform/react.ssr
|
| 37 |
|
| 38 |
|
| 39 | <p> <p>
|
| 40 |
|
| 41 |
|
| 42 | ## Workflow
|
| 43 |
|
| 44 | - Develop UI components on local dev-server within the [UIHarness](https://uiharness.com) or anything that can produce a javascript bundle (eg [ParcelJS](https://parceljs.org)):
|
| 45 |
|
| 46 | - Ensure the UI module has a `bundle` script within it's `package.json`.
|
| 47 |
|
| 48 | - Create an `ssr.yml` configuration file for the server.
|
| 49 |
|
| 50 | ## Sample
|
| 51 |
|
| 52 | The `/sample/now` and `/sample/server` are expecting a `.env` file with your S3 account information:
|
| 53 |
|
| 54 | ```
|
| 55 | #
|
| 56 | # Digital Ocean "SPACES" or AWS "S3" connection secrets.
|
| 57 | #
|
| 58 | SPACES_KEY="..."
|
| 59 | SPACES_SECRET="..."
|
| 60 |
|
| 61 | ```
|
| 62 |
|
| 63 | These are referenced within the `ssr.yml` config file.
|
| 64 |
|
| 65 |
|
| 66 | #### Example sequence:
|
| 67 |
|
| 68 | ```bash
|
| 69 | 🌼
|
| 70 | cd sample/ui
|
| 71 | yarn start
|
| 72 | ```
|
| 73 |
|
| 74 |
|
| 75 | Bundle a version and push it to S3:
|
| 76 |
|
| 77 | ```bash
|
| 78 | 🌳
|
| 79 | cd sample/server
|
| 80 | yarn ssr bundle
|
| 81 | ```
|
| 82 |
|
| 83 | Release bundled version by updating manifest:
|
| 84 |
|
| 85 | ```bash
|
| 86 | 🌳
|
| 87 | cd sample/server
|
| 88 | yarn ssr release
|
| 89 | ```
|
| 90 |
|
| 91 | Start local SSR server to test the bundle:
|
| 92 |
|
| 93 | ```bash
|
| 94 | 🌼
|
| 95 | cd sample/server
|
| 96 | yarn start
|
| 97 | ```
|
| 98 |
|
| 99 | Open in `http://localhost` browser (address/port exposed in server startup log).
|
| 100 |
|
| 101 |
|
| 102 | <p> <p>
|
| 103 |
|
| 104 | ## Routes
|
| 105 | The following system routes are exposed for examining meta-data about the current state and configuration of the server.
|
| 106 |
|
| 107 | ```
|
| 108 | https://domain.com/.manifest
|
| 109 | https://domain.com/.manifest/summary
|
| 110 | https://domain.com/.manifest/summary/<site>
|
| 111 | ```
|
| 112 |
|
| 113 |
|
| 114 | <p> <p>
|
| 115 | <p> <p>
|
| 116 |
|
| 117 |
|