- ⚡ React + Next.js
- ⚔️ TypeScript
- 🎨 SCSS modules
- 💅 Tailwind CSS for utility styles
- 🏎️ Tailwind JIT for on-demand Tailwind styles
- 📦 Yarn for package management
- 📸 Jest + React Testing Library for unit and snapshot tests
- 🎭 Jest + Playwright for E2E tests
- 🔍 ESlint + Stylelint for TypeScript and SCSS linting
- ⚙️ Plop for boilerplate automation
We use Node.js and various packages on NPM for building napari hub. For package management, we use yarn.
It's recommended you use NVM so you don't have to manage multiple Node.js versions yourself:
When you have NVM setup, run the following commands:
# Installs Node.js version defined in `.nvmrc`
nvm install
# Uses project defined Node.js version
nvm use
# Install yarn globally
npm -g install yarn
# Install project dependencies
yarn installThe frontend authenticates as a GitHub OAuth app to allow an increase of the API rate limit. For development, you'll need to create an OAuth app on your personal account:
- Create a new OAuth app
- a) Application name: Can be whatever you want (example:
napari hub dev) - b) Homepage URL: http://localhost:8080
- c) Application description: Leave empty
- d) Authorization callback URL: http://localhost:8080
- a) Application name: Can be whatever you want (example:
- Copy
.env.exampleto.env. - Change
GITHUB_CLIENT_IDto the actual GitHub client ID. - Change
GITHUB_CLIENT_SECERTto the actual GitHub client secret.
To start the frontend in development mode, run the following command:
yarn devAny changes to the code will fast refersh the browser UI.
We use Plop to automate common boilerplate in the codebase. You can run Plop without any arguments and get a list of generators you can use:
yarn plopIf you want to use a specific generator, you can pass the name as the first argument:
# Run component generator
yarn plop component