diff --git a/.npmignore b/.npmignore index c00f2cbb..98ed3edf 100644 --- a/.npmignore +++ b/.npmignore @@ -19,3 +19,4 @@ tsconfig.json tslint.json webpack.config.js yarn.lock +devserver.js diff --git a/devserver.js b/devserver.js new file mode 100644 index 00000000..5087a7b4 --- /dev/null +++ b/devserver.js @@ -0,0 +1,128 @@ +/** + * Server for testing example page on mobile devices. + * + * Usage: + * 1. run `yarn devserver:start` + * 2. Open `http://{ip_address}:3000/example/example-dev.html` + * where {ip_address} is IP of your machine. + * + * Also, can serve static files from `/example` or `/dist` on any device in local network. + */ +const path = require('path'); +const fs = require('fs'); +const http = require('http'); +const { networkInterfaces } = require('os'); + +const port = 3000; +const localhost = '127.0.0.1'; +const nonRoutableAddress = '0.0.0.0'; +const host = getHost(); +const server = http.createServer(serveStatic([ + '/example', + '/dist', +])); + +server.listen(port, nonRoutableAddress, () => { + console.log(` + +${wrapInColor('Editor.js 💖', consoleColors.hiColor)} devserver is running ᕕ(⌐■_■)ᕗ ✨ +--------------------------------------------- +${wrapInColor('http://' + host + ':' + port + '/example/example-dev.html', consoleColors.fgGreen)} +--------------------------------------------- +Page can be opened from any device connected to the same local network. +`); + + if (host === localhost) { + console.log(wrapInColor('Looks like you are not connected to any Network so you couldn\'t debug the Editor on your mobile device at the moment.', consoleColors.fgRed)); + } +}); + +/** + * Serves files from specified directories + * + * @param {string[]} paths - directories files from which should be served + * @returns {Function} + */ +function serveStatic(paths) { + return (request, response) => { + const resource = request.url; + const isPathAllowed = paths.find(p => resource.startsWith(p)); + + if (!isPathAllowed) { + response.writeHead(404); + response.end(); + + return; + } + const filePath = path.join(__dirname, resource); + + try { + const stat = fs.statSync(filePath); + + response.writeHead(200, { + 'Content-Length': stat.size, + }); + const readStream = fs.createReadStream(filePath); + + readStream.on('error', e => { + throw e; + }); + readStream.pipe(response); + } catch (e) { + response.writeHead(500); + response.end(e.toString()); + } + }; +} + +/** + * Returns IP address of a machine + * + * @returns {string} + */ +function getHost() { + const nets = networkInterfaces(); + const results = {}; + + for (const name of Object.keys(nets)) { + for (const net of nets[name]) { + // Skip over non-IPv4 and internal (i.e. 127.0.0.1) addresses + if (net.family === 'IPv4' && !net.internal) { + if (!results[name]) { + results[name] = []; + } + results[name].push(net.address); + } + } + } + + /** + * Offline case + */ + if (Object.keys(results).length === 0) { + return localhost; + } + + return results['en0'][0]; +} + +/** + * Terminal output colors + */ +const consoleColors = { + fgMagenta: 35, + fgRed: 31, + fgGreen: 32, + hiColor: 1, +}; + +/** + * Set a terminal color to the message + * + * @param {string} msg - text to wrap + * @param {string} color - color + * @returns {string} + */ +function wrapInColor(msg, color) { + return '\x1b[' + color + 'm' + msg + '\x1b[0m'; +} diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index fd1e4df8..2a762728 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +### 2.23.3 + +- `Improvement` — *Dev Example Page* - Server added to allow opening example page on other devices in network. + ### 2.23.2 — `Fix` — Crash on initialization in the read-only mode [#1968](https://github.com/codex-team/editor.js/issues/1968) diff --git a/package.json b/package.json index ac7a6b33..a1e2ae8e 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "_tools:make": "yarn _tools:yarn && yarn _tools:build", "tools:update": "yarn _tools:checkout && yarn _tools:pull && yarn _tools:make", "test:e2e": "yarn build && cypress run", - "test:e2e:open": "yarn build && cypress open" + "test:e2e:open": "yarn build && cypress open", + "devserver:start": "yarn build && node ./devserver.js" }, "author": "CodeX", "license": "Apache-2.0",