Siegel   

Siegel is a higly opiniated CSR SPA development platform to build and host any scale projects in a simple way

Features:

• Preconfigured and easily extendable Webpack bundler:

  • ESBuild to transform TypeScript and JSX syntaxes
  • Code linting with ESLint
  • Hot Modules Replace for scripts and styles
  • SASS with typed CSS modules
  • Build and serve site assets compressed with Brotli or GZIP
  • SVG icons to font converter
    
    

• ExpressJS static server:

  • HTTP(S)1 / HTTP(S)2. +Script to create dev certificates to use in Chrome on localhost
    
    

• Utils and modules to use on client side:

  • Big set of React components
  • Easy configurable Router
  • React global state manager built on top of react hooks
  • Optional fetch module to track requests statuses with
  • Network services to make requests and minimal client WebSocket implementation
    
    

• Demo project with already themed components, predefined folder structure and scalable architecture built on top of Siegel
  It gives you a quick start right after initialization!

• Global TS utility types that you may import. They could be usefull while you are building your React project

Read more about each part following the links below:

• Client core
  • UI
  • Router
  • Global store
  • Custom hooks
  • Network
  • Utils
• Core
  • Build
  • Server
  • Utils
• Cross env utils
• Demo project
• TS utils

Simple usage

npm i siegel

Create app.ts file:

import { createRoot } from 'react-dom/client'

const root = document.getElementById('root')
createRoot(root)
    .render('Hello Siegel!')

Bootstrap the app with the next command:

npx siegel run

Now your application is hosting on localhost:3000 in watch mode and ready for development!

You may also define NodeJS dev server using --server flag:

// server.ts

import type { ServerExtenderFn, ExpressExtenderParams } from 'siegel'

const appServer: ServerExtenderFn = params => {
    const { express, staticServer } = params as ExpressExtenderParams

    staticServer
        .use(express.json())
}

export default appServer

To bootstrap the app with server defined - run the next command:

npx siegel run --server server.ts

Siegel provides a command to initialize mini project along with server and app files we created above:

npx siegel init -s

To list all the available Siegel CLI commands and flags: npx siegel

Usage

Siegel itself it's just a bunch of client / server side modules you may use together or appart.
To launch Siegel you just import and call it passing
config as a first argument and runParams as a second

import siegel from 'siegel'

siegel(config, runParams)

Or just pass an entry point to react app and it will do everything else for you:

import siegel from 'siegel'

siegel('/path/to/js_entry.ts')

Config

Build configuration
Server configuration

{   
    /*
        Affects both server(as public dir to be served),
        and client_build(as webpack output folder).
        Default is: path.join(process.cwd(), 'dist')
    */
    publicDir: String,

    /* Static server configuration. */
    server: Object,

    /* Build configuration. */
    build: Object
}

runParams

{   
    /* Run static server. Default is true */
    isServer: Boolean,

    /* Build a project. Default is true */
    isBuild: Boolean,

    /* Run Siegel in production mode. Default is false */
    isProd: Boolean
}

Demo project init

Quick way to start your development journey with everything you need right after project initialization is Demo project.
You may init the demo project having Siegel installed localy:

npx siegel init

Here we have initialized a demo project in a current dirrectory along with package.json (if not yet created)
Now you have project skeleton with preconfigured Siegel in it!
Use various npm commands from the new package.json to perform build, code validation and static serving in development or production modes
Bootstrap newly created project with:

npm start

Probably you don't need to initialize a big project to play with code.
For this reason you may init minimal project passing -m as argument to the siegel init command.
Only client side React entry file and tsconfig will be created. Optionally you may also pass -s parameter to create server extender file.

npm init -m -s

To run mini project use npm start_client if created without server extender.
Otherwise use npm start

More about demo project read here

VSCode tweaks

In order to enable all the features, Siegel provides, you should first change some settings in your VSCode:

{
    "typescript.tsdk": "./node_modules/typescript/lib",
    "eslint.useFlatConfig": true
}

typescript.tsdk - to tell TS extension to load ts plugins from your tsconfig.json

eslint.useFlatConfig - to tell ESLint to use .js config file extension by default

Siegel development

In case you've cloned this repo:

To build siegel run:

npm run __transpile

To start a local development with provided Demo Application run:

npm start