{"id":19864374,"url":"https://github.com/cybercookie/siegel","last_synced_at":"2025-05-02T05:31:06.522Z","repository":{"id":38349871,"uuid":"293468836","full_name":"CyberCookie/siegel","owner":"CyberCookie","description":"Website development ecosystem","archived":false,"fork":false,"pushed_at":"2025-04-22T20:04:04.000Z","size":5440,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T20:43:42.273Z","etag":null,"topics":["bolierplate","create-react-app","development-platform","metaframework","react","siegel","typescript","zero-configuration"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CyberCookie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-09-07T08:33:45.000Z","updated_at":"2025-04-22T19:43:15.000Z","dependencies_parsed_at":"2023-02-14T21:31:40.875Z","dependency_job_id":"e5fface5-1625-469d-8f0d-bd845d65bf68","html_url":"https://github.com/CyberCookie/siegel","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberCookie%2Fsiegel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberCookie%2Fsiegel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberCookie%2Fsiegel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberCookie%2Fsiegel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CyberCookie","download_url":"https://codeload.github.com/CyberCookie/siegel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251992726,"owners_count":21677020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bolierplate","create-react-app","development-platform","metaframework","react","siegel","typescript","zero-configuration"],"created_at":"2024-11-12T15:18:28.259Z","updated_at":"2025-05-02T05:31:06.516Z","avatar_url":"https://github.com/CyberCookie.png","language":"TypeScript","readme":"\u003cbr /\u003e\n\u003ch1\u003e\nSiegel\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\n\u003ca href='https://badge.fury.io/js/siegel' target='_blank'\u003e\n    \u003cimg src='https://badge.fury.io/js/siegel.svg' alt='npm package version' /\u003e\n\u003c/a\u003e\n\n\u003ca href=''\u003e\n    \u003cimg src='https://img.shields.io/badge/npm%20v-%3E%3D%207-brightgreen' alt='npm version' /\u003e\n\u003c/a\u003e\n\n\u003ca href=''\u003e\n    \u003cimg src='https://img.shields.io/badge/node%20v-%3E%3D%2016-brightgreen' alt='node version' /\u003e\n\u003c/a\u003e\n\n\u003ca href=''\u003e\n    \u003cimg src='https://github.com/cybercookie/siegel/workflows/build/badge.svg' alt='build' /\u003e\n\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cbr /\u003e\n\n#### Siegel is a lightweight, opinionated web development platform designed for building scalable client side rendered (CSR) single page applications (SPAs). It aims to simplify the development process.\n\n\u003cbr /\u003e\n\nFeatures:\n- Pre-configured and easily extendable `Webpack` bundler:\n    - `SWC loader` to transform `TypeScript` and `JSX` syntaxes\n    - Code linting with `ESLint`\n    - `Hot Modules Replace` for **scripts** and **styles**\n    - `SASS` with `typed CSS modules`\n    - Build and serve site assets compressed with `Brotli` or `GZIP`\n    - `SVG icons to font` converter\u003cbr /\u003e\u003cbr /\u003e\n\n- `ExpressJS` static server:\n    - Supports `HTTP/1.1` and `HTTP/2`, with a script for generating development certificates for local Chrome use\u003cbr /\u003e\u003cbr /\u003e\n\n- `Utils` and `modules` to use on client side:\n    - A comprehensive set of `React components`\n    - Easy configurable `Router`\n    - React `global state manager` built on top of `react hooks`\n    - Optional `fetch module` for tracking requests statuses\n    - `Network` services for making `requests` and a minimal client `WebSocket` implementation\u003cbr /\u003e\u003cbr /\u003e\n\n- `Demo project` with pre-themed components, a predefined folder structure, and a scalable architecture built on Siegel\u003cbr /\u003e\n    This facilitates a rapid project start after initialization\n\n- `Global TS utility types` are available, enchancing development of your React project \n\n\u003cbr /\u003e\n\nRead more about each part following the links below:\n- Client core\n    - [UI components](https://github.com/CyberCookie/siegel/tree/master/client_core/ui) - Common and lightweight React UI components\n    - [Routing](https://github.com/CyberCookie/siegel/tree/master/client_core/router) - Built-in routing system, simplifying navigation within your SPA and enabling efficient page management\n    - [Global store](https://github.com/CyberCookie/siegel/tree/master/client_core/store) - Allows you to easily create and manage global stores built on top of React hooks\n    - [Custom hooks](https://github.com/CyberCookie/siegel/tree/master/client_core/hooks) - A selction of React to aid in site creation\n    - [Networking](https://github.com/CyberCookie/siegel/tree/master/client_core/network) - Tools for a network data transmission \n    - [Utils](https://github.com/CyberCookie/siegel/tree/master/client_core/utils) - Web related small utilities\n- Core\n    - [Build](https://github.com/CyberCookie/siegel/tree/master/core/client_build) - Webpack abstraction to easily configure a build process\n    - [Server](https://github.com/CyberCookie/siegel/tree/master/core/server) - Minimalistic HTTP1.1(S) / HTTP2(S) servers built with ExpressJS \n    - [Utils](https://github.com/CyberCookie/siegel/tree/master/core/utils) - NodeJS related utils\n- [Cross env utils](https://github.com/CyberCookie/siegel/tree/master/common) - Basic utils to help you process data\n- [TS utils](https://github.com/CyberCookie/siegel/tree/master/global.d.ts) - Useful TypeScript generics\n- [Demo project](https://github.com/CyberCookie/siegel/tree/master/demo_app) - Examle project demonstrating Siegel abilities\n- [Demo mini project](https://github.com/CyberCookie/siegel/tree/master/demo_app_minimal) - Examle minimal project demonstrating Siegel abilities\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n\n## Getting started\n\n\u003cbr /\u003e\n\nInstall Siegel as a project dependency with npm:\n\n```sh\nnpm i siegel\n```\n\n\u003cbr /\u003e\n\nCreate a new file named **app.ts** in your project root directory and add the following code:\u003cbr /\u003e\n\n```ts\nimport { createRoot } from 'react-dom/client'\n\nconst root = document.getElementById('root')\ncreateRoot(root)\n    .render('Hello Siegel!')\n```\n\n\u003cbr /\u003e\n\nRun the app with the next command:\n\n```sh\nnpx siegel run\n```\n\nYour app will now be running on **localhost:3000** in watch mode, enabling live development.\n\n\u003cbr /\u003e\n\nAdditionaly, uou can define a custom **NodeJS development server** using the `--server` flag.\u003cbr/\u003e\nCreate a **server.ts** file with the following content:\n\n\n```ts\n// server.ts\n\nimport type { ServerExtenderFn, ExpressExtenderParams } from 'siegel'\n\nconst appServer: ServerExtenderFn = params =\u003e {\n    const { express, staticServer } = params as ExpressExtenderParams\n\n    staticServer\n        .use(express.json())\n}\n\nexport default appServer\n```\n\n\u003cbr /\u003e\n\nTo start the app with the custom server, execute the following command:\n\n```sh\nnpx siegel run --server server.ts\n```\n\n\u003cbr /\u003e\n\nSiegel provides a command to initialize a minimal project, including the **server.ts** and **app.ts** files created earlier:\u003cbr /\u003e\n\n```sh\nnpx siegel init -s\n```\n\n\u003cbr /\u003e\n\nTo view a list of all available Siegel CLI commands and flags, run: `npx siegel`\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n\n## Basic usage\n\n\u003cbr /\u003e\n\n\u003cp\u003e\n    Siegel is composed of client sude and server side modules that can be used independently or in combination.\u003cbr /\u003e\n    To launch Siegel, import the module and call it with a \u003cbr /\u003e\n    \u003ca href='#config'\u003econfig object\u003c/a\u003e\n\u003c/p\u003e\u003cbr /\u003e\n\n\n```ts\nimport siegel from 'siegel'\n\nsiegel(config)\n```\n\n\n\u003cbr /\u003e\n\nAlternatively, you can provide the entry point to your __React application__ and Siegel will handle the remaining configs:\n\n```ts\nimport siegel from 'siegel'\n\nsiegel('/path/to/js_entry.ts')\n```\n\n\n\u003cbr /\u003e\n\n#### \u003ca id='config'\u003eConfig\u003c/a\u003e\n\n\u003cbr /\u003e\n\n[Build config](https://github.com/CyberCookie/siegel/tree/master/core/client_build#config) \u003cbr /\u003e\n[Server config](https://github.com/CyberCookie/siegel/tree/master/core/server#config)\n\n```ts\n{   \n    runMode: {\n        /* Run static server. Default is true */\n        isServer: Boolean,\n\n        /* Build a project. Default is true */\n        isBuild: Boolean,\n\n        /* Run Siegel in production mode. Default is false */\n        isProd: Boolean\n    },\n\n    /*\n        Affects both server(as public dir to be served),\n        and client_build(as webpack output folder).\n        Default is: path.join(process.cwd(), 'dist')\n    */\n    publicDir: String,\n\n    /* Static server config. */\n    server: Object,\n\n    /* Build config. */\n    build: Object\n}\n```\n\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n## Demo project setup\n\n\u003cbr /\u003e\n\nThe demo project provides a quick start for your development journey, offering all necessary components immediately after initialization.\u003cbr /\u003e\n\nInstall Siegel as a project dependency with npm:\u003cbr /\u003e\n\n```sh\nnpx siegel init\n```\n\n\u003cbr /\u003e\n\n\n\u003c!-- \u003cbr /\u003e\n\nIf you've installed Siegel globally then you should run:\u003cbr /\u003e\n\n```sh\nsiegel init -g\n```\n\n\u003e Keep in mind that Eslint is not working in projects initialized with `-g` flag so far.\u003cbr /\u003e\n\n\u003cbr /\u003e\u003cbr /\u003e --\u003e\n\nThis comman initializes a demo project in the current directory, including a `package.json` if not one does not already exist.\u003cbr /\u003e\nThe project now has pre-configured Siegel project structure.\u003cbr /\u003e\nUse the various `npm commands` within the generated `package.json` to build, validate and server the project in development or production modes.\u003cbr /\u003e\nStart the newly created project with:\u003cbr /\u003e\n\n```sh\nnpm start\n```\n\n\u003cbr /\u003e\n\nFor quick experimentation, you may not need to initialize a full demo project.\u003cbr /\u003e\nTherefore, you can initialize a minimal project by passing the `-m` flag to the `siegel init` command.\u003cbr /\u003e\nThis creates only a client-side React entry file and a `tsconfig.json` file.\u003cbr /\u003e\nOptionally you can also pass the `-s` flag to create a server extender file.\n\n```sh\nnpm init -m -s\n```\n\nTo run the minimal project, use `npm start_client` if a server extender was not created.\u003cbr /\u003e\nOtherwise use `npm start`\n\n\n\u003cbr /\u003e\n\nRead more about demo project [here](https://github.com/CyberCookie/siegel/tree/master/demo_app)\n\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n### VSCode tweaks\n\n\u003cp\u003e\n    In order to enable all the features that Siegel provides, you should first change some settings in your VSCode:\u003cbr /\u003e\n\n```json\n{\n    \"typescript.tsdk\": \"./node_modules/typescript/lib\",\n    \"eslint.useFlatConfig\": true\n}\n```\n`typescript.tsdk` - to tell TS extension to load ts plugins from your `tsconfig.json`\u003cbr /\u003e\n\n`eslint.useFlatConfig` - to tell ESLint to use `.js` config file extension by default\n\u003c/p\u003e\n\n\n\u003cbr /\u003e\u003cbr /\u003e\n\n### Siegel development\n\n\u003cbr /\u003e\n\nIn case you've cloned this repo:\n\n\u003cbr /\u003e\n\nTo build `Siegel` run:\n\n```sh\nnpm run __transpile\n```\n\nTo start a local development with provided `Demo Application` run:\n\n```sh\nnpm start\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybercookie%2Fsiegel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcybercookie%2Fsiegel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybercookie%2Fsiegel/lists"}