This project is to demonstrate how to set up a project using React as a web application with Netlify with automated deployments, preview deployments, and running checks for measuring the quality of web pages deployed using Google Lighthouse.
The project demo is available on the following URL.
The following services are require for development:
The site of the project runs on Netlify with the following configuration:
| Feature | Description | Documentation |
|---|---|---|
| Build | Publish automatically the changes of the project from the default branch to a live site | Link |
| Deploy Preview | This feature allows experience changes to any part of the site without having to publish them to production. | Link |
| Lighthouse | This plugin runs on every deployment of any kind and evaluate the deployed | Link |
-
Fork the project and clone your GitHub project
git clone https://github.com/${USER_NAME}/react-netlify-ci-template -
Install node and npm version of the project
nvm use npm install -g npm@${NPM_VERSION} -
Install project dependencies
npm ci
The setup of the Netlify project has been abstracted from the official Netlify documentation
-
Authenticate with Netlify
npx netlify-cli login
A window will be prompted to log in and grant authorization to the local environment.
-
Initialize the project
The projects used the
./netlify.tomlfor the configuration of the sitenpx netlify-cli init
-
Use the following configuration
? What would you like to do? Create & configure a new site ? Team: Select your team ? Site name (leave blank for a random name; you can change it later): react-netlify-ci-template-${USER_NAME} ? Your build command (hugo build/yarn run build/etc): npm run build ? Directory to deploy (blank for current dir): build
If the terminal returns "Success! Netlify CI/CD Configured!" the Netlify site has been configured successfully.
These are the list of steps to follow to add a project using the Netlify UI for continuous deployments and enabling deployment previews when a Pull Request has been raised.
- Netlify Account Created
-
Link the project to Netlify Team, wait for the first deployment to be completed successfully and update the site name
-
Create a Pull Request with a visual change to test the deployment-preview
If all the checkboxes have been ticked, then have fun with Netlify!
In order to enhance an advance configuration with Netlify a netlify.toml configuration file is required within the project.
The default branch of the project, usually main or master, must contain the netlify.toml configuration.
The following configuration can be used as a starting point https://github.com/juancarlosjr97/react-netlify-ci-template/blob/main/netlify.toml.
The Netlify configuration is based on a React Node project bootstrapped from Create React App by Facebook.
-
The file contains the following configuration for node and npm:
- Node version 18.16.0
- NPM version 9.5.1
-
The command to build the project by default is
npm run build -
The base directory for the website to deploy using Netlify is the root of the project
-
The output of the build command of the built website is the
builddirectory -
The Google Lighthouse plugin has been enabled to analyze the built website on Netlify
Netlify can be integrated tightly with GitHub and to activate this integration the following Netlify app needs to be configured.
With the Netlify app enabled the Netlify drawer is enabled for Netlify Deploy Preview connected to a PR on GitHub.
To start the React app run the following command:
npm run startThe app will be running on the port 3000 and accessible in http://localhost:3000
To run the automated tests execute the following command:
npm run testThe project on every commit runs a pipeline to build and tests the web app.
For more information see here the GitHub Actions.
The app has a predefined Codespaces configuration available at .devcontainer/devcontainer.json as this web app has been developed using Codespaces.
Follow this guide on how to get started with Codespaces.
The project has been bootstrapped from Create React App by Facebook.
Make sure to follow the contributing guide
This project is licensed under the MIT License. See the LICENSE file.