- Make sure you have Node.js v16.14 installed
- Install NVM to manage different Node.js versions
- Run
nvm use
to use the correct node version - Remove node_modules running:
rm -rf node_modules
(optional) - Install the dependencies:
yarn
- Create a
.env.local
file at the root of the project by copying.env.sample
and giving a value for each of the variables - Run the server:
yarn dev
You can access a hot-reloaded version of the app on http://localhost:3000.
The application is built using React and the framework Next.js. The styles use Tailwind.
This project makes use of IcoMoon to manage its library of icons.
If you wish to add new icons, please follow these steps:
- Open the IcoMoon app: https://icomoon.io/app/#/select
- Click the “Manage project” (or “Untitled Project”) button of the header
- Click “Import Project”
- Select the file
components/icons/selection.json
- Click “Load” next to the “Untitled Project” that appeared
- Drag your icons to the existing set
- Select all the icons and click “Generate SVG & More” at the bottom of the screen
- Click the “Download” button
Once you have downloaded the folder, you need to update the Icons
component:
- Replace
components/icons/selection.json
by the new one - For each new icon, make sure to copy its
symbol
element fromsymbol-defs.svg
and to add it tocomponents/icons/index.tsx
In order to use any of the icons in a component, import the Icon
component and pass the icon's name to the name
prop. You can find the name of an icon by looking at the second part of their symbol
's id
.
If you desire to update or remove any icon, please follow the same steps, but update or remove them in IcoMoon.
The icon has three sizes defined: sm => width and height = 0.625rem md => width and height = 0.875rem (default) lg => width and height = 1.25rem
For different sizes use classNames prop.
Deploying the application to production is done using Capistrano, which is already configured. You will need SSH access to the server, which you can get from the server's admin.
This table covers the existing env vars, and their purpose. To set them, copy .env.sample
file to .env.local
and update its content.
This file may also include example values.
Variable name | Description |
---|---|
NEXTAUTH_SECRET | Key used to encrypt the NextAuth.js JWT, and to hash email verification tokens. Do not forget to add a secret. NextAuth can handle without it in development mode, but it won't in production! https://next-auth.js.org/configuration/options#secret |
NEXTAUTH_URL | Needed by the next-auth library for handling auth requests and callbacks. Set the environment variable to the canonical URL of your site. Not needed in Vercel deploys. |
NEXT_PUBLIC_API_URL | URL, including protocol, of the backend data API. |
NEXT_PUBLIC_MAPBOX_STYLES_CHINESE_LABELS | |
NEXT_PUBLIC_MAPBOX_STYLES_ENGLISH_LABELS | |
NEXT_PUBLIC_ADMIN_PANEL | URL, including protocol, of the admin interface of the backend data API. |