@idio/frontend

!Node.js CI

@idio/frontend is The Middleware To Serve Front-End JavaScript. It allows to set-up the modern front-end development environment where node_modules are served alongside compiled JSX code (without using _Babel_, see @a-la/jsx).

``sh
yarn add @idio/frontend
npm i @idio/frontend
`

Table Of Contents

- Table Of Contents
- API
- frontEnd(config=: FrontEndConfig): !_goa.Middleware
* FrontEndConfig
- Hot Reload
* HotReload
* Enabling Hot Reload
* Status
* Node-watch
- Copyright & License





API

The package is available by importing its default function:

`js
import frontend from '@idio/frontend'
`





frontEnd(
  config=: FrontEndConfig,
): !_goa.Middleware


Create a middleware to serve Front-End _JavaScript_, including JSX and node_modules.

- config FrontEndConfig (optional): Options for the middleware.

The middleware constructor will initialise the middleware function to serve files from the specified directory or directories (frontend by default). The files will be updated on-the-fly to fix their imports to relative paths (e.g., preact will be transformed into /node_modules/preact/dist/preact.mjs). Any CSS styles will also be served using an injector script.

Files served with this middleware, either transpiler or plain JS, will be cached using their mtime. There is no need to compute md5 because this middleware is meant for the development purposes, whereas production code can be built with _Depack_.

__FrontEndConfig__: Options for the middleware.


| Name | Type | Description | Default |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| directory | (string \| !Array<string>) | The directory or directories from which to serve files. | frontend |
| mount | string | The directory on which to mount. The dirname must be inside the mount. E.g., to serve example/src/index.js from /src/index.js, the mount is example/src and directory is src. | . |
| override | !Object<string, string> | Instead of resolving the _package.json_ path for packages and looking up the module and main fields, paths can be passed manually in the override. E.g., { preact: '/node_modules/preact/src/preact.js' } will serve the source code of _Preact_ instead of the resolved dist version. | - |
| pragma | string | The pragma function to import. This enables to skip writing h at the beginning of each file. JSX will be transpiled to have h pragma, therefore to use React it's possible to do import { createElement: h } from 'react'. | import { h } from 'preact' |
| log | (boolean \| !Function) | Log to console when source files were patched. | false |
| jsxOptions | !_alaJsx.Config | Options for the transpiler. | - |
| exportClasses | boolean | When serving CSS, also export class names. | true |
| hotReload | !HotReload | Enable hot reload for modules. Requires at least to implement getServer method so that WebSocket listener can be set up on the HTTP server. | - |

The middleware can be used in any _Koa_ application, or within the idio web server.

`jsx
import idio, { render } from '@idio/idio'
import frontend from '@idio/frontend'

/**
* @param {import('..').FrontEndConfig} options
*/
export default async (options = {}, src = 'example/frontend') => {
const { url, app, router, server } = await idio({
// logger: { use: true },
_frontend: {
use: true,
middlewareConstructor() {
return frontend({
directory: ['example/frontend', 'example/reload'],
...options,
})
},
},
}, { port: process.env.PORT })
router.get('/', async (ctx) => {
ctx.body = render(


Hello World