{"id":19467949,"url":"https://github.com/jamaluddinrumi/sidebase","last_synced_at":"2026-06-19T07:31:15.271Z","repository":{"id":119054428,"uuid":"568687941","full_name":"jamaluddinrumi/sidebase","owner":"jamaluddinrumi","description":null,"archived":false,"fork":false,"pushed_at":"2022-11-22T13:16:47.000Z","size":4373,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-23T16:58:36.516Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/jamaluddinrumi.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":"2022-11-21T07:43:18.000Z","updated_at":"2022-11-21T07:43:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"fbbc79a3-a2bd-427f-bd1c-7f516dfc1d60","html_url":"https://github.com/jamaluddinrumi/sidebase","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jamaluddinrumi/sidebase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamaluddinrumi%2Fsidebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamaluddinrumi%2Fsidebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamaluddinrumi%2Fsidebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamaluddinrumi%2Fsidebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamaluddinrumi","download_url":"https://codeload.github.com/jamaluddinrumi/sidebase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamaluddinrumi%2Fsidebase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34522033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-10T18:37:51.403Z","updated_at":"2026-06-19T07:31:15.255Z","avatar_url":"https://github.com/jamaluddinrumi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![sidebase-logo-for-dark](.github/sidebase_logo_dark_icon_font_for_dark_bg_long.svg#gh-dark-mode-only#gh-dark-mode-only)\n![sidebase-logo-for-light](.github/sidebase_logo_light_icon_font_white_bg_long.svg#gh-light-mode-only)\n\n# sidebase\n\n \u003ca href=\"https://github.com/sidebase/sidebase/actions?query=branch%3Amain+event%3Apush\"\u003e\u003cimg src=\"https://github.com/nuxt/framework/workflows/ci/badge.svg?branch=main\u0026event=push\" alt=\"CI Status\"\u003e\u003c/a\u003e\n [![GitHub stars](https://badgen.net/github/stars/sidebase/sidebase)](https://GitHub.com/sidebase/sidebase/)\n [![License][license-src]][license-href]\n[![Follow us on Twitter](https://badgen.net/badge/icon/twitter?icon=twitter\u0026label)](https://twitter.com/sidebase_io)\n[![Join our Discord](https://badgen.net/badge/icon/discord?icon=discord\u0026label)](https://discord.gg/9MUHR8WT9B)\n\n\nsidebase is a modern, best-practice, batteries-included fullstack-app starter based on Nuxt 3 and TypeScript.\n\nWith this Nuxt 3 starter you get production-ready frontend + backend projects while still having fun! [Atinux, CEO of Nuxt](https://github.com/Atinux) said to sidebase on Twitter:\n\u003e Beautiful work on sidebase!\n\n## Quick start\n\n![sidebase-preview-for-dark](.github/preview/dark_mode.png#gh-dark-mode-only#gh-dark-mode-only)\n![sidebase-preview-for-light](.github/preview/light_mode.png#gh-light-mode-only)\n\n1. Use the official [`nuxi`-cli](https://v3.nuxtjs.org/api/commands/init) to start:\n    ```sh\n    npx nuxi@latest init -t community/sidebase\n    ```\n2. Go into the `nuxt-sidebase/` directory\n    ```sh\n    cd nuxt-sidebase\n    ```\n3. Install the dependencies\n    ```sh\n    npm i\n    ```\n4. Start developing (with database, backend, API, ... running) at [localhost:3000](http://localhost:3000)\n    ```sh\n    npm run dev\n    ```\n\n## Features\n\nThe key features are:\n- 🎒 **Fullstack**: Develop frontend and backend in a single TypeScript code base\n    - Fullstack [`Vue 3`](https://vuejs.org/) + [`Nuxt 3 (stable)`](https://v3.nuxtjs.org/),\n    - Database models, migrations, queries and easy DB-switching via [`TypeORM`](https://typeorm.io/),\n    - Frontend- and Backend data-transformation via [`nuxt-parse`](https://www.npmjs.com/package/@sidebase/nuxt-parse) and [`zod`](https://github.com/colinhacks/zod),\n    - In-memory development SQL-database via [`sqlite3`](https://www.sqlite.org/index.html),\n    - Linting via [`eslint`](https://eslint.org/),\n    - Test management, Test UI, component snapshotting via [`vitest`](https://vitest.dev/),\n    - Component tests via [`test-library/vue`](https://testing-library.com/),\n    - API tests via [`supertest`](https://github.com/visionmedia/supertest),\n    - Code coverage via [`c8`](https://github.com/bcoe/c8),\n    - CSS utiltities via [`TailwindCSS`](https://tailwindcss.com/),\n    - CSS components via [`Ant Design Vue`](https://antdv.com/components/overview),\n    - Type checking in script and template via [`Volar / vue-tsc`](https://github.com/johnsoncodehk/volar)\n- 🏎️ **Fast to code**: Database, example tests, example components and example pages are all there for you to fill out\n- 🐛 **Fewer bugs**: Strong data-validation using `zod` to validate all transferred data, fully typed API-routes, strict DB models via `TypeORM`\n- 😊 **Easy to use**: Designed to follow best practices and to be ready-to-go for development, without additional dev-dependencies like `docker` that make it hard to get started\n- 🚀 **Ready for launch**: Github Actions CI, Dockerfile, easy switch to most popular SQL-databases are all there, out of the box ([get in touch if you're missing something](https://github.com/sidebase/sidebase/issues/new/choose))\n\nTo facilitate this `sidebase` bootstraps a nuxt 3 project that permits developing a backend and a frontend using just Nuxt 3 with overarching TypeScript support. We want to show the world how enjoyable end-to-end typescript programming can be, displacing the myth that JS/TS-backends are no good. This starter solves a lot fo the \"real-world\" problems that occur after you start using Nuxt or any other framework: How to write backend tests? How to write component tests? How to calculate test coverage? How to integrate a database? How to build a docker image? ...?\n\nIf you have any problems with this project (e.g., setting it up on your PC) [open an issue](https://github.com/sidebase/sidebase/issues/new/choose) and we'll figure it out together with you 🎉\n\n## Documentation\n\nThis is the documentation section of sidebase. It contains useful commands and guides to make your work easier and more pleasurable.\n\n### Commands\n\nUseful Commands for development, testing and deployment:\n- Develop \u0026 Debug the app:\n    - `npm i`: Install required dependencies\n    - `npm run dev`: Start the fullstack app, including database\n- Linting \u0026 Formatting (`npm run lint`)\n    - `npm run lint:style`: eslint for formatting \u0026 linting\n    - `npm run lint:style -- --fix`: Autofix styles and lints where possible\n    - `npm run lint:types`: typescript typechecking\n- Testing \u0026 Code Coverage \u0026 Component Snapshots\n    - `npm run test`: Run tests once, report results and coverage\n        - `npm run test:watch`: Run tests and watch file changes, run tests for changed files\n        - `npm run test -- -u`: Update component snapshots after components changed\n        - `npm run test -- -t \"some test-text\"`: Run all tests with `some test-text` in their `test(...)` description\n    - `npm run test:ui`: Run the vitest testing web UI for easier test interaction\n    - `@testing-library/vue` for easy and best-practice component tests, [see example here](https://testing-library.com/docs/vue-testing-library/examples)\n    - breakpoint debugging (zero-config in VS Code)\n        1. Open the command palette (CMD / CTRL + SHIFT + P)\n        2. Select \"Debug: JavaScript Debug Terminal\"\n        3. Run any `npm` command inside `app/`, e.g.: `npm run test`\n        4. Your code editor colors should change a bit (e.g.: to orange) while executing the command, the left side should show deep execution insights\n        5. Set breakpoints (click left of line count in editor - red dot should appear) - the debugger will automatically work and stop at them and allow you to inspect variables\n        6. Run a command that runs the code you set breakpoints at, e.g., `npm run test`\n- Building \u0026 Deploying:\n    - `npm run build`: Build the app for production\n    - `npm run start`: Start the app in production (requires `npm run build` beforehand)\n- CSS usable without imports\n    - Utility \u0026 Styling: TailwindCSS 3\n    - Components: Ant Design Vue with component-auto-import\n- slim docker ready\n    ```sh\n    \u003e docker build -t nuxt3-app .\n    \u003e docker run -p 3000:3000 --init --rm nuxt3-app\n    ```\n    - Note: Docker is not required for development or deployment - for development `sqlite3` is used and will launch automatically via `npm run dev` 🚀\n- Miscallaneous\n    - `nvm use`: If you use `nvm`, use this command to make sure that your local environment uses the correct, required node version\n    - Pre-commit checking (husky) \u0026 fixing (lint-staged)\n    - github CI pipeline to linting, testing, typing checks\n    - nuxt-component support in tests\n    - debug sql database queries by setting `logging: true` in the `database/index.ts`: This will show you a live log of all ongoing database queries which is super helpful to debug database problems\n\n### Guides\n\nUseful guides to get started with or use more advanced features of `sidebase`.\n\n#### First time node and npm setup\n\nIf this is the first time you run a `npm` / `node` app on your setup:\n\n1. Install the `node` version manager `nvm` by running:\n    ```sh\n    \u003e curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash\n    ```\n2. Install the required `node` and `npm` version:\n    ```sh\n    # uses existing `.nvmrc`-file to install required version\n    \u003e nvm install\n    ```\n3. Use the required `node` and `npm` version:\n    ```sh\n    # uses `.nvmrc` to use required version\n    \u003e nvm use\n\n    # ALTERNATIVE: make node 16.14.2 your default node version (version copied from `.nvmrc`, check there for most up to date node version)\n    \u003e nvm alias default 16.14.2\n    ```\n4. Install a code editor (recommended: VS Code), [get it here](https://code.visualstudio.com/)\n5. Uninstall or disable the old Vue VS Code extension `Vetur`, else conflicts may arise between `volar` and `Vetur`\n6. Install the `volar` extension to support `vue`, `nuxt` and `typescript` development help\n    - for vs code: https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar\n    - sublime LSP: https://github.com/sublimelsp/LSP-volar\n    - vim: https://github.com/yaegassy/coc-volar\n7. Enable \"take over mode\" for volar for this project.\n    - documented here: https://github.com/johnsoncodehk/volar/discussions/471\n    - for VS Code:\n        1. Run (CMD/CTRL + SHIFT + P): Extensions: Show Built-in Extensions\n        2. Find \"TypeScript and JavaScript Language Features\"\n        3. Right click and select \"disable for workspace\"\n        4. Reload the editor\n        5. A message \"Take over mode enabled\" (or similar) should appear\n8. Go to the [top of this section](#commands) and execute commands (start with `npm i` to get all packages!)\n\nIf you have type-problems after running `npm i` for the first time:\n- Ensure you have `vetur` disabled or uninstalled (see above),\n- Ensure you have the builtin `typescript` extention of VS Code disabled (see above),\n- Reload the `vue` volar server (VS Code command: \"Volar: Restart Vue Server\")\n- Close and re-open the file you have problems with\n\nIf none of this works, file an issue (preferrably with a reproduction) [here](https://github.com/sidebase/sidebase/issues/new/choose).\n\n#### `yarn`\n\nWe use the `overrides` key in the `package.json`. `yarn` does not support this, you will have to replace it with:\n```\n\"resolutions\": {\n    \"typeorm/**/parse5\": \"6.0.1\"\n}\n```\n\nfor it to work with yarn.\n\n#### `nuxt-parse`\n\n1. [`nuxt-parse`](https://www.npmjs.com/package/@sidebase/nuxt-parse) to validate and deserialize data from the `server` in the `frontend`:\n    - Define a zod-schema for the response of your endpoint, [like so](./app/server/schemas/healthz.ts):\n        ```ts\n        // file: ~/server/schemas/healthz.ts\n        import { z } from '@sidebase/nuxt-parse'\n        import { transformStringToDate } from './helpers'\n\n        export const responseSchemaHealthCheck = z.object({\n          status: z.literal('healthy'),\n          time: z.string().transform(transformStringToDate),\n          nuxtAppVersion: z.string(),\n        })\n\n        export type ResponseHealthcheck = z.infer\u003ctypeof responseSchemaHealthCheck\u003e\n        ```\n    - Define an endpoint that returns complex data (e.g.: date-objects), [like so](./app/server/api/healthz.get.ts):\n        ```ts\n        // file: ~/server/api/healthz.get.ts\n        import { defineEventHandler } from 'h3'\n        import type { ResponseHealthcheck } from '~/server/schemas/healthz'\n\n        export default defineEventHandler((): ResponseHealthcheck =\u003e {\n          return {\n            status: 'healthy',\n            time: new Date(),\n            nuxtAppVersion: process.env.NUXT_APP_VERSION || 'unknown',\n          }\n        })\n        ```\n    - Call it from the frontend, get free data validation, derserialization (e.g.: string-date is transformed to `Date` object) and typing, [like so](./app/pages/index.vue):\n        ```ts\n        // file: ~/pages/index.vue\n        import { makeParser } from '@sidebase/nuxt-parse'\n        import { responseSchemaHealthCheck } from '~/server/schemas/healthz'\n\n        const transform = makeParser(responseSchemaHealthCheck)\n        const { data } = await useFetch('/api/healthz', { transform })\n\n        console.log(data)\n        // -\u003e Object { status: \"healthy\", time: Date Thu Sep 15 2022 15:45:53 GMT+0200 (Central European Summer Time), nuxtAppVersion: \"unknown\" }\n        ```\n    - That's it! `data` will be fully typed AND all data inside will be de-serialized, so `time` will be a `Date`-object, and not a string, that you first need to deserialize\n    - If an `error` is thrown, it's done using nuxt [`createError`](https://v3.nuxtjs.org/api/utils/create-error/), so it works well in frontend and on the server. `data` will be null in that case. You can find zod-details about your error in `error.data`\n2. Use [`nuxt-parse`](https://www.npmjs.com/package/@sidebase/nuxt-parse) to validate data that the user has passed to your API endpoint:\n    - Parse user data like this:\n        ```ts\n        import { defineEventHandler } from 'h3'\n        import type { CompatibilityEvent } from 'h3'\n        import { parseBodyAs, z } from '@sidebase/nuxt-parse'\n\n        export default defineEventHandler(async (event: CompatibilityEvent) =\u003e {\n          // Parse the payload using the update schema. The parsing is important to avoid bad, incorrect or malicious data coming in\n          const payload = await parseBodyAs(event, z.object({\n            requestId: z.string().uuid(),\n            pleaseDoubleThisNumber: z.number()\n          }))\n\n          return {\n            requestId: payload.requestId,\n            doubledNumber: 2 * payload.pleaseDoubleThisNumber\n          }\n        })\n        ```\n    - Other helpers like `parseQueryAs`, `parseCookiesAs`, `parseParamsAs`, ... are defined in `@sidebase/nuxt-parse`. See a bigger [example here](./app/server/api/example/%5Bid%5D.patch.ts)\n\n\n## License\n\n[MIT](./LICENSE)\n\n\n\u003c!-- Badges --\u003e\n\n[license-src]: https://img.shields.io/npm/l/@sidebase/nuxt-session.svg\n[license-href]: https://npmjs.com/package/@sidebase/nuxt-session\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamaluddinrumi%2Fsidebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamaluddinrumi%2Fsidebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamaluddinrumi%2Fsidebase/lists"}