{"id":16718197,"url":"https://github.com/elbakerino/js-dev-starter","last_synced_at":"2026-04-11T00:45:05.957Z","repository":{"id":195400389,"uuid":"692350948","full_name":"elbakerino/js-dev-starter","owner":"elbakerino","description":"Starter repository for isomorphic monorepo projects. With TS, NodeJS, ReactJS - full ESM support.","archived":false,"fork":false,"pushed_at":"2023-09-22T10:47:04.000Z","size":3756,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T00:51:18.257Z","etag":null,"topics":["babel","client-side-rendering","esm","isomorphic","isomorphic-javascript","monorepo","nodejs","npm-packages","npm-workspaces","reactjs","server-side-rendering","typescript","universal-javascript","webpack","webpack5"],"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/elbakerino.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}},"created_at":"2023-09-16T08:00:44.000Z","updated_at":"2023-09-17T20:33:58.000Z","dependencies_parsed_at":"2023-09-22T02:08:58.761Z","dependency_job_id":"e9ed3de5-2fb8-4b19-ad79-e5a2a3649fb1","html_url":"https://github.com/elbakerino/js-dev-starter","commit_stats":null,"previous_names":["elbakerino/js-dev-starter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elbakerino%2Fjs-dev-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elbakerino%2Fjs-dev-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elbakerino%2Fjs-dev-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elbakerino%2Fjs-dev-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elbakerino","download_url":"https://codeload.github.com/elbakerino/js-dev-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243713420,"owners_count":20335567,"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":["babel","client-side-rendering","esm","isomorphic","isomorphic-javascript","monorepo","nodejs","npm-packages","npm-workspaces","reactjs","server-side-rendering","typescript","universal-javascript","webpack","webpack5"],"created_at":"2024-10-12T21:35:38.389Z","updated_at":"2025-12-31T00:22:13.183Z","avatar_url":"https://github.com/elbakerino.png","language":"TypeScript","readme":"# JS DEV Starter\n\n\u003e basic working setup, not yet optimized in various aspects\n\nStarter repository for isomorphic JS development, with npm workspaces and strict ESM support.\n\n## Setup\n\nInstall dependencies:\n\n```shell\nnpm i\n```\n\nConfigure:\n\n```shell\ncp .env.example .env\n```\n\n## Usage\n\nStart dev compilation and local server:\n\n```shell\nnpm run start-dev\n# default: http://localhost:8080\n```\n\nOnly compile, for e.g. server-in-docker (docker example setup not yet included):\n\n```shell\nnpm run dev\n```\n\nBuild production assets:\n\n```shell\nnpm run build\n```\n\nStart test-driven-development:\n\n```shell\nnpm run tdd\n```\n\nStart [storybook](https://storybook.js.org):\n\n```shell\nnpm run storybook\n# default: http://localhost:8081\n```\n\nStart style watcher, requires a running `npm run dev` or `npm run build`, is included in `npm run start-dev`:\n\n```shell\nnode cli styles --watch\n```\n\n## Overview\n\nUsing:\n\n- **npm workspaces** for monorepo handling\n- **babel** for packages and server files transpilation to ESM\n- **webpack** for bundling client-side assets\n- **sass** for pre-building CSS files (separate to e.g. webpack-loader)\n- **express.js** as NodeJS webserver (atm. using an, undocumented, micro-framework for routing + cli)\n- **liquid** templates with LiquidJS for server-side templating\n- **ReactJS** with support for client and server-side rendering\n    - using [react/jsx-runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) for React v18 (no import of React just for JSX)\n    - example of `renderToString` for [synchronous rendering](./src/handler/HomeHandler.tsx)\n    - example of `renderToPipeableStream` [with server-side resolving](./src/handler/StreamStaticHandler.tsx) and [with client streaming](./src/handler/StreamHandler.tsx) for `Suspense` supported rendering\n- **Typescript** everywhere, with strict ESM (`NodeNext`) resolution\n- **eslint** for linting JS/TS files\n- **jest** for automatic tests\n\nSupports project structures:\n\n- ✔️ 1 Server, 1 App, unlimited packages\n    - Restricted to a 'single root project' (which is the app + server) since npm workspaces seem to work only with the root project's `package.json`, which is the only one correctly locked, and there is no strict independence between packages, unlike what `lerna` provides.\n- ❌ unlimited Servers, 1 App, unlimited packages\n    - requires e.g. `lerna` style independent handling of `package-lock.json` in nested projects\n- ❌ 1 Server, unlimited Apps, unlimited packages\n    - requires multi-webpack config setup\n    - or requires separate webpack entrypoints with route-to-used-entrypoints mapping\n- ❌ unlimited Servers, unlimited Apps, unlimited packages\n    - requires e.g. `lerna` style independent handling of `package-lock.json` in nested projects and multi-webpack config setup\n    - e.g. [`content-ui`](https://github.com/control-ui/content-ui) has such a setup, using manual locking for servers, dev with `ts-node` instead of `babel`, *but without separating the apps dependencies atm.*\n\n\u003e the correct handling of `package-lock.json` per deployable server is a requirement, but with workarounds, like locking the respective package extra in CI, which isn't the best practice\n\n\u003e some structures may benefit from full ts-node for development, using babel only for production bundling\n\n## Things to solve\n\n- basic Jest/testing-library setup, **but not yet optimized/fully setup**\n- contains basic example on data providers for server+client-side rendering, **but does not contain react routing and respective data loading yet**\n- storybook and styles (webpack-imports, separate stylesheets) are not that good integrated yet\n- the assets, especially styles, should be somewhere else, to better support e.g. file-deletion sync\n- babel compilation didn't support file-deletion syncs, check if maybe now theres some workaround\n- get emotion and mui running, once mui is esm ready\n- the server uses `spdy` for HTTP2 support (required for HTTP2-Plain for E2E-HTTP2 on Google Cloud Run), try to use only native HTTP2\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felbakerino%2Fjs-dev-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felbakerino%2Fjs-dev-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felbakerino%2Fjs-dev-starter/lists"}