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 transformTypeScript
andJSX
syntaxes- Code linting with
ESLint
Hot Modules Replace
for scripts and stylesSASS
withCSS modules
- Build and serve site assets compressed with
Brotli
orGZIP
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
andmodules
to use on client side:- Big set of
React components
- Easy configurable
Router
- React
global state manager
built on top ofreact hooks
- Optional
fetch module
to track requests statuses with Network
services to makerequests
and minimal clientWebSocket
implementation
- Big set of
-
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:
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
Siegel 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')
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
}
{
/* 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
}
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
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