yarn
to install dependencies
yarn dev
to start development
- Rename
.vscode/recommended.settings.json
to.vscode/settings.json
to enable recommended VSCode settings
- Prettier
- Automated code formatting
- Tailwind CSS IntelliSense
- Improves the coding experience when using TailwindCSS with features such as autocomplete, CSS Linting and hover preview.
- Headwind
- An opinionated class sorter for TailwindCSS, ensures consistent ordering of classes.
💡 Test and build app
Trigger: on all Pull Requests to the main
branch
Definition: ./github/workflows/kodeworks-CI.yml
Used for change-detection, so that steps unrelated to changed files don't have to be executed.
💡 Summary of tests and code annotations where code failed
- Test report available in Github under
Continous Integration
-action underTest report
-step. - Code annotation related to failing tests is available in the
files changed
-tab in the Pull Request.
Trigger: Continous Integration
job completed
Definition: ./github/workflows/test-report.yml
Documentation: Test Reporter Github repo
💡 Build, export and deploy app
Trigger: when code is pushed to the main
branch, e.g. after merging in a branch
Definition: ./github/workflows/kodeworks-CD.yml
The act library makes local testing of Github Actions relatively straight forward, providing faster feedback so you don't have to push code to Github to test changes in a workflow.
- Install act (and Docker) locally on your machine
- Run
act -j <name-of-workflow-job-you-want-to-test>
e.g.act -j test
- If you don't want to use the large image requiring +20GB:
- Select the Medium size image of act.
- The job will fail because
yarn
is not part of the medium image. - Add
- run: npm i -g yarn
to the start of the job to useyarn
in the workflow
- Comment out any cache (
#cache: 'yarn'
) since the Cache Service is not available in the Docker container. - Do your changes, and run
act -j <name-of-workflow-job-you-want-to-test>
to re-run the job locally - Remember to uncomment any cache and remove
- run: npm i -g yarn
afterwards!
The site is hosted at https://kodeworks.github.io/kodeworks.no-poc
- The use of a subpath (
/kodeworks.no-poc
) requires a URL prefix for navigation and resources.- Resources can use
utils/urlPrefix.js
- Fonts are added using postcss-font-magician in order to utilize
utils/urlPrefix.js
- Fonts are added using postcss-font-magician in order to utilize
- Navigation is handled by NextJS using
basePath
innext.config.js
- The environment variable
NEXT_PUBLIC_BASE_PATH
used for the subpath is defined in./github/workflows/kodeworks-CD.yml
- Resources can use
Since we host a static HTML app without a Node.js server, some NextJS functionality relying on a Node.js server is not available.
Most notably:
- The
next/image
-component is not available getServerSideProps
is not supportedAPI Routes
are not supported
- Pages are React components defined in the
/pages
-folder_document.js
is a custom NextJS-component used to augment the<html>
and<body>
tag_app.js
is a custom NextJS-component used to control page initialization
- Routing is dictated by the structure of components/folders in the
/pages
-folderFolder structure: URL: pages/ ├── index.html / ├── folk/ /folk -> returns 404 since it is a folder │ ├── ola-nordmann.js /folk/ola-nordmann │ └── eirik.js /folk/eirik └── prosjekter.js /prosjekter └── [prosjekt].js /prosjekter/prosjekt -> see dynamic routes below 👇
- dynamic routes are used in
/pages/prosjekter/[prosjekt].js
- dynamic routes are used in
components/
are structured according to the atomic design methodology- Storybook-stories are located next to the component
data/
contains content for people, projects and tech used in componentshooks/
contains custom React hooksutils/
contains custom functions for small/repetitive operationspublic/
contains static public resourcesstyles/
contains*.css
.
.github/workflows/
defines CI/CD.storybook/
configures Storybooknext.config.js
configures NextJSpostcss.config.js
configures PostCSStailwind.config.js
configures TailwindCSS
.vscode/
configures VS Code.prettierrc
configures prettier.gitignore
specifies untracked files
- Official plugin to TailwindCSS used to set the aspect ratio of images at different screen sizes.
- Used in
hooks/useScrollBasedOpacity.js
to change opacity based on scroll position.
- Used to load custom fonts in
postcss.config.js
using aurlPrefix
-variable to support Github Pages without a custom domain.
💡 A React Framework providing an awesome developer experience.
NextJS enables us to export our React App to static HTML with some limitations, which we serve with Github Pages.
💡 A utility-first CSS framework that lets us provide styling without leaving the HTML/JSX.
- Utility-first means that each TailwindCSS class does one thing and one thing only.
- Uses PurgeCSS to remove all unused CSS.
- Configured in
tailwind.config.js
- Easy to customize existing utilities in
tailwind.config.js
💡 A tool for transforming CSS with JavaScript.
- Configured in
postcss.config.js
- TailwindCSS is a plugin to PostCSS.
- Autoprefixer adds vendor prefixes to CSS rules using Can I use
- postcss-font-magician generates
@font-face
-rules using environment variables to handle fonts hosted with subpath. - postcss-preset-env enables us to write modern CSS, and let the plugin fix polyfills based on targeted browsers.
- List of more plugins
💡 Helps us document components for reuse and automatically visually test our components to prevent bugs.
- The main configuration file is
.storybook/main.js
.storybook/preview.js
is used to add CSS generated by TailwindCSS to all components
- Build static version of Storybook with
yarn build-storybook
. - Serve static version of storybook with
npx http-server storybook-static
- The
.github/workflows/kodeworks-CI.yml
-workflow tries to build a static version of Storybook if the change detection job detects any changes defined to be related to Storybook.