uralys / reactor

:radioactive: ReactJs app boilerplate using esbuild

archived in 2024

I created and used this tool to create fast frontends using esbuild. It was experimental and is today irrlevant since we have tools like https://github.com/vitejs/vite, which I use on every frontends.

Reactor

🪄 A simple "CreateReactApp-like", using esbuild, to bootstrap your React app and npm scripts.

> npx reactor
Usage: reactor <command>

Commands:
  reactor create  bootstrap your React app with initial files
  reactor start   run the local dev server
  reactor build   use esbuild to create the distribution files
  reactor toc     generate TOC for your documentation from your markdown files

create your app

First prepare your new project with a startup package.json:

> mkdir yourApp; cd yourApp
> npm i --save-dev @uralys/reactor

Let's create your boot files:

> npx reactor create

☢️ reactor updated you files successfully.
✅ you can now start your App
> npm run start:dev

You can now version and push your project to your repository

> git init
> git add .
> git commit -m "Initial commit from @uralys/reactor"
> git remote add origin https://github.com/your-new-repo
> git push origin master

commands

Once your app is created, you can use:

• npm run start:dev to run a local server with esbuild and live-server
• npm run build to build you /public distribution with esbuild

TOC (Optional)

• npm run toc to generate TOC from you markdowns if you use Reactor to generate a documentation website. I'll document this later.

indexation (Optional)

• add a sitemap config to generate your sitemap.xml
• for Google configure your indexation on https://search.google.com/search-console
• for DuckDuckGo configure your indexation on Bing (import from google search-console) https://www.bing.com/webmasters

Config

You can update reactor.config.js:

{
  esbuild: {
    ...esbuildOptions
  },
  documentation: {
    source: './path/to/docs',
    dist: './path/to/tocs'
  },
  start: {
    hosts: ["platform.localhost"]
  },
  sitemap: {
    publicPath = './public',
    links = [],
    hostname: 'https://your.domain',
    outputName = 'sitemap.xml'
  }
}

If your project uses dotenv, call it from the top of reactor.config.js

import dotenv from 'dotenv';
dotenv.config();

Tips and suggestions

monitoring

• analyse perfs with https://pagespeed.web.dev/

frontend

• use La Taverne for your state management
• add reactrouter
• add axios for http requests
• use this auth0 guide for the authentication
• add animations with react-spring

backend

• use serverless!
• use netlify to deploy. (Note: set NODE_VERSION in environnment vars)

dev:publish Reactor

> npm version patch
> ggpush --tags
> npm run release

reactor's Issues

rxjs for state management

https://blog.logrocket.com/rxjs-with-react-hooks-for-state-management/

react optimisation

https://weareadaptive.com/2020/04/09/render-performance-optimization-react/

ladle

check https://github.com/tajo/ladle

sitemap generation

• https://github.com/ekalinin/sitemap.js
• https://www.fullstacklabs.co/blog/dynamic-sitemaps-for-a-static-react-app
• https://leerob.io/blog/nextjs-sitemap-robots

libs

• https://iconic.app/
• https://floating-ui.com/
• https://nivo.rocks/
• https://www.freecodecamp.org/news/react-libraries-to-use-in-your-projects

state management

• https://github.com/voronianski/flux-comparison

react hooks

• https://kentcdodds.com/blog/application-state-management-with-react

• https://kentcdodds.com/blog/how-to-use-react-context-effectively

• react state management: https://rajeshnaroth.medium.com/component-state-management-in-react-functional-components-with-hooks-e7c412c05e71

• https://github.com/LeanKit-Labs/lux.js

third parties

• https://github.com/pmndrs/zustand

• jotai: https://github.com/pmndrs/jotai

• recoil https://recoiljs.org/

• hookstate: https://hookstate.js.org/

• rxjs example: https://blog.logrocket.com/rxjs-with-react-hooks-for-state-management/