Bitsy UI Core

Bitsy UI core is the core library required to create a bitsy micro frontend.

Setting Up

$3

install the lib by running yarn add @bitsy-ui/core

$3

Create a react component `src/Components/ExampleComponent.tsx

`
import React, { useCallback, useState } from 'react';

const ExampleComponent = (props) => {
const [message, setMessage] = useState('Hello');
const doClick = useCallback(() => {
setMessage('Welcome');
}, [setMessage]);
return (


export default ExampleComponent;
`

$3

Setting up the service api src/service.ts
`
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import path from 'path';
import createBitsyUI from '@bitsy-ui/core/lib/createBitsyUI';
import ExampleComponent from '@src/Components/ExampleComponent';

const bitsyUIConfig = require(path.join(process.cwd(), 'bitsyui.config.js'));

const { boot, strap } = createBitsyUI({ config: bitsyUIConfig });

strap('ExampleComponent', ExampleComponent);

boot((req, res) => {
res.send({ notFound: true });
});
`

$3

Setting up the assets service/ui.ts

`
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import { hydrate, render } from 'react-dom';
import ExampleComponent from '@src/Components/ExampleComponent';
import hydrateComponent from '@bitsy-ui/core/lib/Helpers/hydrateComponent';
import renderComponent from '@bitsy-ui/core/lib/Helpers/renderComponent';
import childComponent from '@bitsy-ui/core/lib/Helpers/childComponent';

// Enable code splitting by returning with loadable
export const Components = {
ExampleComponent,
};

export const Hydrate = hydrateComponent(hydrate, Components);
export const Render = renderComponent(render, Components);
export const Child = childComponent(Components);
`

$3

Build the bitsy UI assets yarn run bitsy-ui build

Navigate to the SSR of the example component http://localhost:9000/ExampleComponent`