This is the official library and portal for my ultimate portfolio.
This turborepo uses pnpm as a package manager. It includes the following packages/apps:
- Create an account in Contentful
- Go to Setting > API Keys and create one
- Create an .env file in the root of your app
./app/<APP_PORTAL_NAME>/ - Add these three variables from your Contentful APY Keys:
VITE_CONTENTFUL_ENV=
VITE_CONTENTFUL_SPACE_ID=
VITE_CONTENTFUL_DELIVERY_TOKEN=
- If you want to develop your components in isolation, take the Button.stories.ts file as an example.
- Go to your repository settings > Actions > General
- In Workflow permissions check Read and write permissions (in case your pipe creates some file)
- Also check Allow Github Actions to create and approve pull requests
- Create an NPM Account
- Verify your account with 2FA
- Go to Access Token and create a new one and select the type Publish
- In your repository add a secret NPM_TOKEN and add the access token created
- Before you add changes to your main branch run the following command:
npx changeset
- Commit your changes and the release workflow detect when the main branch is being pushed
- After that it will create a PR that you need to confirm if everything is alright
npm run build: Runs the build script in every package or app that you have in your monorepo.npm run dev: Runs the dev script in every package or app that you have in your monorepo.npm run lint: Runs Eslint on all files in your project directory and its subdirectories. Also overwrite the file with the proper format (--fix flag).npm run format: Runs Prettier on all files in your project directory and its subdirectories matching the extensions .ts, .tsx, and .md. Also overwrite the file with the proper format (--write flag).publish-packages: It run when the workflow release-version trigger
web-guy-portal: another Next.js applibrary-sb: a stub React component library (storybook) shared by bothweb-guy-portalapplicationeslint-config-custom:eslintconfigurations (includeseslint-config-nextandeslint-config-prettier)tsconfig:tsconfig.jsons used throughout the monorepo
From root directory
- Add dependency package globally:
pnpm add -w <package> - Add devDependency package globally:
pnpm add -Dw <package> - Add devDependency package to specific project:
pnpm add -D <package> --filter <project>
contentful space export --environment-id <env_source> --content-file migrate-file.json: Runs contentful-cli to export environment's data into a json file.contentful space import --environment-id <env_target> --content-file migrate-file.json: Runs contentful-cli to import environment's data from json file into contenful environment.
To open the storybook library, run the following commands:
cd <ROOT_FOLDER_NAME> > cd packages > cd library-sb
npm run storybook
Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:
cd <ROOT_FOLDER_NAME>
pnpm dlx turbo login
This will authenticate the Turborepo CLI with your Vercel account.
Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:
pnpm dlx turbo link
This turborepo has some additional tools already setup for you:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting
- Storybook for components building
- CommitLint for add a commit convention
- Prettier for formatting the code
- Husky for adding hooks
- Tailwind utility-first CSS framework
Learn more about the power of Turborepo: