← Back to index

React Web Template

Lint, test, build, and deploy React/Vite/Next.js static web apps to AWS S3 + CloudFront with Cloudflare DNS.

Setup

Recommended: External CI/CD Configuration

Go to Settings > CI/CD > General pipelines and set CI/CD configuration file to:

https://gitlab-ci-yaml-template.enouvo.com/react-web/.gitlab-ci.yml

Alternative: Include in .gitlab-ci.yml

include:
  - 'https://gitlab-ci-yaml-template.enouvo.com/react-web/.gitlab-ci.yml'

Required Variables

GITLAB_CI_ACCESS_TOKENToken to download ci-scripts (set by admin at group level)
WEB_URLPublic URL (e.g. https://myapp.example.com). Enables auto-discovery of S3 bucket and CloudFront.

Optional Variables

VariableDefaultDescription
NODE_VERSION18.18Node.js version for build image
AWS_BUCKETauto-discovered from WEB_URLS3 bucket name
AWS_DISTRIBUTION_IDauto-discoveredCloudFront distribution ID
AWS_OIDC_ROLE_ARNAWS role ARN for OIDC auth (no static keys needed)
DIST_DIRECTORYbuildBuild output directory
ENABLE_ESLINT_TESTfalseEnable ESLint in test stage (deprecated, lint now runs separately)

Cloudflare DNS (auto-configured)

When WEB_URL is set and a CloudFront distribution is found, these are auto-set:

VariableAuto Value
CLOUDFLARE_RECORD_NAMEDomain from WEB_URL
CLOUDFLARE_RECORD_CONTENTCloudFront domain or S3 website endpoint
CLOUDFLARE_RECORD_TYPECNAME
CLOUDFLARE_ZONE_NAMERoot domain (e.g. example.com)

You still need to set CLOUDFLARE_API_TOKEN manually.

Sentry Sourcemaps

Automatically uploads sourcemaps after build if configured:

VariableDescription
SENTRY_AUTH_TOKENSentry auth token (masked)
SENTRY_ORGOrganization slug
SENTRY_PROJECTProject slug
SENTRY_URLSelf-hosted URL (default: https://sentry.io)

Pipeline Stages

test (lint + test in parallel) → build → scan → deploy → notify

Skip Variables

SKIP_LINT=true
SKIP_TEST=true
SKIP_DEV_BUILD_REACT_WEB=true
SKIP_STAGING_DEPLOY_REACT_WEB=true