Designsystemet Basic React App
React app with Designsystemet components, Vite, and TypeScript
A React application using Designsystemet from Digdir with blog cards, Vite for development, and TypeScript support. Includes Docker containerization, Kubernetes deployment manifests, and GitHub Actions CI/CD workflow.
terchrisPrerequisites
Files
Files (30)
├── .dockerignore ├── .gitignore ├── Dockerfile ├── eslint.config.js ├── index.html ├── package.json ├── README-designsystemet-basic-react-app.md ├── template-info.yaml ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts ├── .github/ │ └── workflows/ │ └── urbalurba-build-and-push.yaml ├── doc/ │ └── screenshot.png ├── manifests/ │ ├── deployment.yaml │ └── kustomization.yaml ├── public/ │ ├── vite.svg │ └── images/ │ ├── accessible-components.webp │ ├── creating-custom-themes.webp │ └── exploring-designsystemet.webp ├── scripts/ │ └── optimize-images.sh └── src/ ├── App.css ├── App.tsx ├── index.css ├── main.tsx ├── vite-env.d.ts ├── components/ │ └── BlogCard/ │ ├── BlogCard.module.css │ └── BlogCard.tsx ├── data/ │ └── blog-posts.json └── types/ └── BlogPost.ts
Related templates
①What gets set up
When you install this template, the following are configured for you:
- Adds TypeScript and development tools (Node.js already in devcontainer)
②Setup
npm install③Run the Vite dev server
npm run devVite runs on port 5173. VS Code auto-forwards the port — click the globe icon in the Ports tab.
Architecture
These diagrams are auto-generated from the template's metadata. Click any diagram to enlarge.
Deployment
Components
Template README
The Designsystemet Basic React App template is a React app that demonstrates how to use the Norwegian government design system (Designsystemet) to build a styled web application. The purpose of this app is to verify that the development environment is set up and to provide a starting point for apps that use the Designsystemet component library. See more documentation at http://localhost:3000/docs/templates/web-app/designsystemet-basic-react-app
What it renders
src/App.tsx— page shell: headings and a grid of blog cards.src/components/BlogCard/BlogCard.tsx— each post using Designsystemet Card, Heading, Paragraph (@digdir/designsystemet-react).src/data/blog-posts.json— post list consumed byApp(shape matchessrc/types/BlogPost.ts).src/main.tsx— Vite/React entry; imports global CSS and themes.
Static assets for posts live under public/ (paths referenced from the JSON).
Dev server
- Run:
npm installthennpm run dev(Vite HMR on file changes). - Default dev URL is shown in the terminal (typically http://localhost:3000 unless the port is taken).
Changing the app
- Edit copy and layout in
App.tsx; adjust card styling inBlogCard.tsx/BlogCard.module.css. - Add or edit posts in
src/data/blog-posts.jsonand place images underpublic/as needed.