Siegel is a higly opiniated 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.js 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.js

function appServer(app, { express }) {
    console.log('Custom server is ready')
}

module.exports = appServer

In console run:

npx siegel run --server server.js 

Run npx siegel To get list of Siegel CLI commands

Usage

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 initialize a demo project in a current dirrectory along with package.json (if not yet exists) 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

More about demo project read here

VSCode tweaks

{
    "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