Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cybercookie/siegel
Website development ecosystem
https://github.com/cybercookie/siegel
bolierplate create-react-app development-platform metaframework react siegel typescript zero-configuration
Last synced: 2 months ago
JSON representation
Website development ecosystem
- Host: GitHub
- URL: https://github.com/cybercookie/siegel
- Owner: CyberCookie
- License: mit
- Created: 2020-09-07T08:33:45.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T07:23:59.000Z (5 months ago)
- Last Synced: 2024-08-29T08:52:38.749Z (5 months ago)
- Topics: bolierplate, create-react-app, development-platform, metaframework, react, siegel, typescript, zero-configuration
- Language: TypeScript
- Homepage:
- Size: 5.93 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Siegel
#### 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 `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](https://github.com/CyberCookie/siegel/tree/master/client_core)
- [UI](https://github.com/CyberCookie/siegel/tree/master/client_core/ui)
- [Router](https://github.com/CyberCookie/siegel/tree/master/client_core/router)
- [Global store](https://github.com/CyberCookie/siegel/tree/master/client_core/store)
- [Custom hooks](https://github.com/CyberCookie/siegel/tree/master/client_core/hooks)
- [Network](https://github.com/CyberCookie/siegel/tree/master/client_core/network)
- [Utils](https://github.com/CyberCookie/siegel/tree/master/client_core/utils)
- Core
- [Build](https://github.com/CyberCookie/siegel/tree/master/core/client_build)
- [Server](https://github.com/CyberCookie/siegel/tree/master/core/server)
- [Utils](https://github.com/CyberCookie/siegel/tree/master/core/utils)
- [Cross env utils](https://github.com/CyberCookie/siegel/tree/master/common)
- [Demo project](https://github.com/CyberCookie/siegel/tree/master/demo_app)
- [TS utils](https://github.com/CyberCookie/siegel/tree/master/global.d.ts)
## Simple usage
```sh
npm i siegel
```
Create **app.js** file:
```ts
import { createRoot } from 'react-dom/client'
const root = document.getElementById('root')
createRoot(root)
.render('Hello Siegel!')
```
Bootstrap the app with the next command:
```sh
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:
```ts
// server.js
function appServer(app, { express }) {
console.log('Custom server is ready')
}
module.exports = appServer
```
In console run:
```sh
npx siegel run --server server.js
```
Run `npx siegel` To get list of Siegel CLI commands
## Usage
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
```ts
import siegel from 'siegel'
siegel(config, runParams)
```
Or just pass an entry point to __react app__ and it will do everything else for you:
```ts
import siegel from 'siegel'
siegel('/path/to/js_entry.ts')
```
#### Config
[Build configuration](https://github.com/CyberCookie/siegel/tree/master/core/client_build)
[Server configuration](https://github.com/CyberCookie/siegel/tree/master/core/server)
```ts
{
/*
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
```ts
{
/* 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:
```sh
npm start
```
More about demo project read [here](https://github.com/CyberCookie/siegel/tree/master/demo_app)
### Siegel development
In case you've cloned this repo:
To build `siegel` run:
```sh
npm run __transpile
```
To start a local development with provided `Demo Application` run:
```sh
npm start
```