Verified Commit be85b126 authored by Aral Balkan's avatar Aral Balkan
Browse files

Update readme to fix an error and improve the example; bump version

parent 2bf599d4
......@@ -31,11 +31,30 @@ web-compiler inspect
## Example
@hypha/web-compiler is used by hooking it up to an HTTPS server.
@hypha/web-compiler is used by hooking it up to an HTTPS server like [@hypha/https-server](https://source.ind.ie/hypha/tools/https-server).
The following example demonstrates how you can use @hypha/web-compiler in both
development and production and alongside regular HTTPS and WebSocket routes (the
latter demonstrated using the [Express](http://expressjs.com/) framework):
The following example, taken from [the initial scaffolding of Hypha](https://source.ind.ie/hypha/hypha/tree/9c6ece2cd72b3183e4ba434e22b0a3ce6b9b5947), demonstrates how you can use @hypha/web-compiler in both development and production and alongside regular HTTPS and WebSocket routes (the
latter demonstrated using the [Express](http://expressjs.com/) framework). As web-compiler uses [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) (SSE) for live reload, live reload will also work properly alongside your WebSocket routes.
### To run the example:
You can checkout and run the initial Hypha scaffolding using the following commands:
```sh
git clone --branch 1.0.0 --single-branch https://source.ind.ie/hypha/hypha/
cd hypha
npm i && npm start
```
### To test the example:
1. Open `https://localhost` in a browser to see the client-side routes (a [Choo](https://github.com/choojs/choo) app).
2. Open the JavaScript console (and look in the server output in Terminal) and see the WebSocket message successfully echoed.
3. Open `https://locahost/https-get/` in a browser to hit the HTTPS GET route.
### Code
Here is a simplified listing of the code from the Hypha scaffolding that you can use by adding whatever you like to _client/index.js_:
```js
const httpsServer = require('@ind.ie/https-server')
......@@ -70,9 +89,9 @@ app.ws('/echo', (webSocket, request) => {
// Regular HTTPS routes go here.
//
app.get('/hello', (request, response) => {
app.get('/https-get', (request, response) => {
response.writeHeader(200, {'Content-Type': 'text/html'})
response.end('<!doctype html><html lang=\'en\'><head><meta charset=\'utf-8\'/><title>Hello</title><style>body{background-color: "white";}</head><body>Hello, I am an HTTPS GET route!</body></html>')
response.end('<!doctype html><html lang=\'en\'><head><meta charset=\'utf-8\'/><title>Hello</title><style>body{background-color: white; font-family: sans-serif;}</style></head><body><h1>Hypha</h1><p>Hello, I am a dynamically-served HTTPS GET route.</p></body></html>')
})
//
......@@ -82,24 +101,37 @@ app.get('/hello', (request, response) => {
// In production, use build a static distribution and serve it with express.static.
//
// client/index.js is the entry-point of your client-side JavaScript (e.g., Choo app).
// client/index.js is the entry-point of your client-side JavaScript (e.g., a Choo app).
const entryPoint = path.join(__dirname, 'client/index.js')
if (process.env.NODE_ENV === 'production') {
// Build the static distribution and serve it in production.
const build = require('@hypha/web-compiler/lib/cmd-build')
build(entryPoint, null, {base: 'https://localhost'})
app.use(express.static('dist'))
app.use(express.static('client/dist'))
} else {
// Set up development mode with live compilation and reload.
const webCompilerMiddleware = require('@hypha/web-compiler/http')(entryPoint)
app.use(webCompilerMiddleware)
webCompilerMiddleware.compiler.on('error', (nodeName, edgeName, error) => {
console.log(' ⚙ [web-compiler] Error:', nodeName, edgeName, error)
})
webCompilerMiddleware.compiler.on('change', function (nodeName, edgeName, nodeState) {
const name = nodeName + ':' + edgeName
console.log(' ⚙ [web-compiler]', name)
})
webCompilerMiddleware.compiler.on('ssr', function (result) {
console.log(' ⚙ [web compiler] SSR:', result.success ? 'success' : 'fail')
})
}
// Handle server errors.
app.use(function(error, request, response, next) {
console.log('Error', error)
res.send(500)
console.log('Server Error', error)
response.send(500)
})
// Start the server.
......
{
"name": "@hypha/web-compiler",
"version": "1.0.0",
"version": "1.0.1",
"description": "A web compiler forked from Bankai and tuned for Hypha.",
"license": "AGPL-3.0-or-later",
"repository": "https://source.ind.ie/hypha/tools/web-compiler",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment