1 | ![Module](https://img.shields.io/badge/%40platform-react.ssr-%23EA4E7E.svg)
|
2 | [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
|
3 | [![NPM](https://img.shields.io/npm/v/@platform/react.ssr.svg?colorB=blue&style=flat)](https://www.npmjs.com/package/@platform/react.ssr)
|
4 | ![banner](https://user-images.githubusercontent.com/185555/63076436-66585300-bf89-11e9-8bca-0b80ae5313d0.png)
|
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 | ![diagram](https://user-images.githubusercontent.com/185555/63561626-c6b14b00-c5ae-11e9-9102-796597f4e28c.png)
|
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 |
|