@joelcox22/boilerplate v1.11.1

Boilerplate

This package abstracts away boilerplate code for common patterns.

Design goals:

• Dependent repos should use convention with as little configuration as possible.
• As little code as possible should be saved to dependent repos.
• If code is stored in dependent repositores, a yarn upgrade should automate any required changes.
• Provide dev tooling without config - linting, semantic release, etc.
• Automatic reloading / HMR for everything.

Supported Abstractions

React Application

src/client/index.tsx

import { css } from '@emotion/core';

const style = {
  container: css`
    text-align: center;
    padding-top: 30vh;
  `,
}

export default function App() {
  return (
    <div css={style.container}>
      <h1>Boilerplate Application!</h1>
    </div>
  );
}

Style using Emotion, includes Destyle.css.

Recommended to use @joelcox22/ui for a base component library.

Express Server

src/server/index.tsx

import type { Express } from 'express';

export default function server(app: Express) {
  app.get('/test', (req, res) => {
    res.send({
      hello: 'world',
    });
  });
}

Component Fixtures

test/fixtures/whatever.tsx

import * as React from 'react';
import MyComponent from '../../src/components/whatever.tsx';

export default function MyComponent() {
  return (<MyComponent testProp={123} />);
}

• Add any files you want to the fixtures directory.
• All jsx or tsx files with a default export of a React Component will automatically be rendered in the fixtures environment at http://localhost:3000/fixtures/ when in development mode.
• If you don't have a client application (just components and fixtures), then http://localhost:3000/ will redirect to your fixtures automatically.
• The fixtures environment supports HMR. As such, it's very important to not have side effects in your fixtures, or in files that they import.
  • If you absolutely require side effects, be sure to clean them up in a module.hot.dispose callback.