{"id":28383565,"url":"https://github.com/inseefrlab/vite-insee-starter","last_synced_at":"2026-01-03T23:13:28.134Z","repository":{"id":240916167,"uuid":"803711521","full_name":"InseeFrLab/vite-insee-starter","owner":"InseeFrLab","description":"A template project for SPAs","archived":false,"fork":false,"pushed_at":"2025-06-22T01:07:01.000Z","size":1931,"stargazers_count":2,"open_issues_count":2,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-22T02:24:08.805Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vite-insee-starter.demo-domain.ovh","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/InseeFrLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-05-21T08:43:46.000Z","updated_at":"2025-06-19T23:09:20.000Z","dependencies_parsed_at":"2024-06-01T20:48:27.100Z","dependency_job_id":"b804d7c1-58b2-41d9-8405-f3165bb22b81","html_url":"https://github.com/InseeFrLab/vite-insee-starter","commit_stats":null,"previous_names":["inseefrlab/vite-insee-starter"],"tags_count":49,"template":false,"template_full_name":null,"purl":"pkg:github/InseeFrLab/vite-insee-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fvite-insee-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fvite-insee-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fvite-insee-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fvite-insee-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/InseeFrLab","download_url":"https://codeload.github.com/InseeFrLab/vite-insee-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InseeFrLab%2Fvite-insee-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261891658,"owners_count":23225766,"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":[],"created_at":"2025-05-30T06:09:03.202Z","updated_at":"2025-12-24T19:15:54.689Z","avatar_url":"https://github.com/InseeFrLab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Single Page Application starter\n\nThis is a suggested stack to build modern SPA.  \nIt's hosted here : https://vite-insee-starter.demo-domain.ovh/\n\nIt's composed of:\n\n- [Docker](https://www.docker.com/)\n- [Nginx](https://www.nginx.com/)\n- [Vite](https://vitejs.dev/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [React](https://reactjs.org/)\n- [Tanstack Router](https://tanstack.com/router/v1) - A better alternative to React Router.\n- 🐓 [react-dsfr](https://react-dsfr.codegouv.studio/) - The React Toolkit for [The French Design System](https://www.systeme-de-design.gouv.fr/) (DSFR)\n- [MUI](https://mui.com/material-ui/) - As a backup component library to fallback to if you don't find the component you need in [the DSFR library](https://components.react-dsfr.codegouv.studio/?path=/story/%F0%9F%87%AB%F0%9F%87%B7-introduction--page).\n- 🐓 [vite-envs](https://github.com/garronej/vite-envs) - A solution to avoid having to re-build the app when you change the environment variables.\n- 🐓 [tss-react](https://www.tss-react.dev/) - A CSS-in-JS solution.\n- 🐓 [i18nifty](https://www.i18nifty.dev/) - A solution to to make your app available in multiple languages.\n- [react-query](https://react-query.tanstack.com/) - A solution to manage your API calls.\n- 🐓 [oidc-spa](https://www.oidc-spa.dev/) - A solution to integrate OpenID Connect in your app. (Keycloak)\n- 🐓 [tsafe](https://github.com/garronej/tsafe) - Type safety utilities.\n- 🐓 [ts-ci](https://github.com/garronej/ts-ci) - GitHub Actions to manage the lifecycle of the project and publish automatically on Docker Hub.\n- [Prettier](https://prettier.io/) - Code formatter.\n- [Orval](https://orval.dev/) - A solution to generate API clients based on OpenAPI specs.\n\n🐓: Made by us.\n\n## Running locally\n\n```env\ngit clone https://github.com/InseeFrLab/vite-insee-starter\ncd vite-insee-starter\ncp .env.sample .env.local\nyarn\nyarn dev\n```\n\n## White label\n\nBy default, the app comes with a french government branding.  \nYou can however make the app white label by setting `VITE_IS_GOV_INSTANCE=false` in `.env.local`.\n\n## Deploying the APP\n\nYou can use the Docker Image published here: https://hub.docker.com/r/inseefrlab/vite-insee-starter  \nYou have to set the environment variables:\n\n```env\nVITE_API_URL=https://insee-todo-api.up.railway.app\nVITE_OIDC_ISSUER_URI=https://auth.code.gouv.fr/auth/realms/playground\nVITE_OIDC_CLIENT_ID=vite-insee-starter\n```\n\n## Automatic publishing on Docker Hub\n\nThe CI of this starter automatically publishes on dockerhub under `\u003cname of the github org\u003e/\u003cname of the repo\u003e`\n\nFor it to work you must have set the GitHub Actions secrets:\n\n```\n${{ secrets.DOCKERHUB_USERNAME }}\n${{ secrets.DOCKERHUB_TOKEN }}\n```\n\n(It is configured in the option of the repo or the github org)\n\n## The TODO rest API\n\nFor demoing this stack we created a simple todo app REST API.  \nIt's available here: https://github.com/InseeFrLab/todo-rest-api\nand is deployed here: https://insee-todo-api.up.railway.app/doc\n\nThe client used to consume this API is automatically generated by Orval.  \nYou can refresh it for the currently published version of the API by running:\n\n```bash\nyarn generate-todos-api-client\n```\n\n## Running the Docker Image\n\n```bash\ndocker build -t inseefrlab/vite-insee-starter:main .\n\ndocker run -it -p 8083:8080 \\\n  --env VITE_TODOS_API_URL=\"https://insee-todo-api.up.railway.app\" \\\n  --env VITE_OIDC_ISSUER_URI=\"https://cloud-iam.oidc-spa.dev/realms/oidc-spa\" \\\n  --env VITE_OIDC_CLIENT_ID=\"vite-insee-starter\" \\\n  inseefrlab/vite-insee-starter:main\n```\n\nOpen http://localhost:8083\n\n## Keycloak theme\n\nWhen authenticating you will notice that the login pages are DSFR themed.  \nWe're using the custom keycloak theme of the DSFR: [keycloak-theme-dsfr](https://github.com/codegouvfr/keycloak-theme-dsfr) 🐓.  \nIt has been created using [react-dsfr](https://react-dsfr.codegouv.studio/) and [Keycloakify](https://keycloakify.dev/).\n\n## Build with this stack:\n\n### Onyxia\n\n- [Source code](https://github.com/InseeFrLab/onyxia)\n- [Public instance](https://datalab.sspcloud.fr)\n\n\u003ca href=\"https://youtu.be/FvpNfVrxBFM\"\u003e\n  \u003cimg width=\"1712\" alt=\"image\" src=\"https://user-images.githubusercontent.com/6702424/231314534-2eeb1ab5-5460-4caa-b78d-55afd400c9fc.png\"\u003e\n\u003c/a\u003e\n\n### The French Interministeriel Base of Free Software\n\n- [Source code](https://github.com/codegouvfr/sill-web/)\n- [Deployment of the website](https://sill-preprod.lab.sspcloud.fr/)\n\n\u003ca href=\"https://youtu.be/AT3CvmY_Y7M?si=Edkf0vRNjosGLA3R\"\u003e\n  \u003cimg width=\"1712\" alt=\"image\" src=\"https://github.com/garronej/i18nifty/assets/6702424/aa06cc30-b2bd-4c8b-b435-2f875f53175b\"\u003e\n\u003c/a\u003e\n\n## Why pushing tss-react over other styling solution?\n\nYou might think that tss-react isn't the more obvious choice and I'm just pushing it because we made it but here me out.  \nIt has approximately 900 000 downloads per month and is used by establish solution like [Jitsi](https://jitsi.org/) and\nit integrates flawlessly with MUI. It's even [mentioned in the official MUI documentation](https://mui.com/material-ui/migration/migrating-from-jss/#2-use-tss-react).\n\nBut more importantly. It's arguably the one of the most powerful styling solution. It enables to write styles as a function of the internal state of the component.  \nIt let you express sophisticated styling logic in a way that is easy to read and maintain.\n\nIt's drawback is that, as it's a dynamic styling solution (as opposed to statically extracted ones like tailwind), it's doesn't have the same performance and is not\ncompatible with Next.js Server Components. However at Insee we're building SPA and the performance hit is negligible (we're talking about a few milliseconds).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finseefrlab%2Fvite-insee-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finseefrlab%2Fvite-insee-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finseefrlab%2Fvite-insee-starter/lists"}