Need private packages and team management tools?Check out npm Orgs. »


1.6.0 • Public • Published


npm version

@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).

yarn add -E @idio/frontend

Table Of Contents


The package is available by importing its default function:

import frontend from '@idio/frontend'

async frontend(
  config: FrontendConfig,
): Middleware

The middleware constructor will initialise the middleware function to serve files from the specified directory (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'

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

/* yarn example/ */
import idio from '@idio/idio'
import render from '@depack/render'
import frontend from '@idio/frontend'
(async () => {
  const { url, app } = await idio({
    // logger: { use: true },
    _frontend: {
      use: true,
      middlewareConstructor(_, config) {
        return frontend(config)
      config: {
        directory: 'example/frontend',
  }, { port: process.env.PORT })
  app.use(async (ctx) => {
    ctx.body = render(<html>
        Hello World
        <script type="module" src="example/frontend"/>
    </html>, { addDoctype: true })
  console.log('Started on %s', url)
├── Component.jsx
├── index.jsx
└── style.css

The entry point

import { render } from 'preact'
import Component from './Component'
// linked node_modules are also resolved
import Form, { Input } from '@depack/form'
render(<Component test="Welcome"/>, document.body)
  <Input placeholder="hello world"/>
</Form>, document.body)

The component

import './style.css'
const Component = ({ test }) => {
  return <div>{test}</div>
export default Component

The style

body {
  background: lightcyan;

Chrome Example


Art Deco © Art Deco for Idio 2019 Idio Tech Nation Visa Tech Nation Visa Sucks


npm i @idio/frontend

Downloadsweekly downloads









last publish


  • avatar
Report a vulnerability