Front end scaffold

This is a project template which could be used to the creation of new projects. Some of the features included are:

• Based on Next.js
• Tailwind as CSS Framework
• Reusable components such as forms, modals, icons, and other most use components
• Redux and Redux-Toolkit
• Typescript already configured
• Cypress as testing client
• git workflow and hooks
• editorconfig and code style based on Airbnb
• Storybook also available and configured

Getting Started

Check our documentation.

Quick start

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about this project, take a look at the following resources:

• Blogin internal post - communication to Vizzuality
• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Standardization guidelines - a set of agreements and conventions.

Deploy on Vercel

First, we recommend to read the guideline about how to use Vercel.

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

Deploy to production

Deployment to production (an AWS EC2 instance) is done automatically using Capistrano and Capistrano actions through a GitHub action.

Contribution rules

Please, create a PR for any improvement or feature you want to add. Try to not commit directly anything on the main branch.

Vulnerability mitigation

Dependabot's vulnerability security alerts are configured in this repository and are displayed to the administrators.

When vulnerabilities are detected, a warning message is displayed at the top of the repository. The list of alerts can be found in the Dependabot alerts page.

Here's a step-by-step guide on how to address vulnerabilities found in production code:

1. Go to the Dependabot alerts page and locate the front-end vulnerability to address
2. Identify if the vulnerability affects production code:
   • To do so run yarn npm audit --recursive --environment production
   • If the dependency is not listed by this command, then the vulnerability only affects development code. You can dismiss the alert on GitHub as “Vulnerable code is not actually used” in the top right corner of the vulnerability page.
   • If the dependency is listed, follow the steps below.
3. On the vulnerability page, click the “Create Dependabot security update” button
   • This will create a Pull Request with a fix for the vulnerability. If GitHub can generate this PR, then you can merge and the security alert will disappear.
   • If the vulnerability can't be patched automatically, follow the steps below.
4. If the action fails, then you can semi-automatically update the vulnerable dependency by running npm_config_yes=true npx yarn-audit-fix --only prod
   • yarn-audit-fix (see repository) is a tool that applies the fixes from npm audit fix to Yarn installations
   • The tool might also not be able to fix the vulnerability. If so, continue with the steps below.
5. If the action fails, then you will have to manually update the dependencies until the vulnerability is solved

Env variables

Variable name	Description	Default value
SENDGRID_API_KEY_SUBSCRIPTION	Key to authenticate access to SendGrid e-mail platform services.
NEXT_PUBLIC_GA_TRACKING_ID	Google Analytics tracking ID.
NEXT_PUBLIC_GTM_TRACKING_ID	Google Tag Manager tracking ID.