Skip to main content

Installation Guide

To get started with the Sipe Design System(side), follow these steps. Note that Side Component packages require configuration to use the GitHub Package Registry. Please follow this guide before proceeding with the installation.

if you didn't, you might encounter an error as below

@sipe-team/side is not in the npm registry, or you have no permission to fetch it

Prerequisites​

Make sure you have the following installed on your machine:

Local Development with mise​

If you are developing this repository locally, we recommend using mise to keep the Node.js and pnpm versions in sync.

mise install

Add the activation command for your shell:

# zsh
echo 'eval "$(mise activate zsh)"' >> ~/.zshrc
source ~/.zshrc

# bash
echo 'eval "$(mise activate bash)"' >> ~/.bashrc
source ~/.bashrc

# PowerShell
echo 'mise activate pwsh | Out-String | Invoke-Expression' >> ~/.config/powershell/Microsoft.PowerShell_profile.ps1

Then install dependencies:

pnpm install

If you use VS Code or Cursor, we recommend these extensions:

  • hverlin.mise-vscode for mise integration
  • tombi-toml.tombi for mise.toml syntax highlighting and completion

Create Github Token ( classic )​

  1. Go to developer setting

  2. make sure grant package related permission for Github token

gh

.npmrc configuration for project​

touch .npmrc
echo "//npm.pkg.github.com/:_authToken=<YOUR_GITHUB_TOKEN>" > .npmrc
echo "@sipe-team:registry=https://npm.pkg.github.com/" >> .npmrc
warning

Important: Make sure to add .npmrc to your .gitignore file to prevent committing your token. For CI/CD environments, use secrets management to store your GitHub token as a secret environment variable.

.npmrc configuration for global​

npm adduser --scope @sipe-team --registry https://npm.pkg.github.com --auth-type legacy
  • Username: Your GitHub username
  • Password: Your GitHub token
  • Email: Your email address

.yarnrc.yml configuration for yarn project​

  1. add npmScopes in .yarnrc.yml
npmScopes:
  sipe-team:
    npmRegistryServer: 'https://npm.pkg.github.com'
  1. login npm with yarn
yarn npm login --scope sipe-team