Create and Deploy React in 2 minutes with CI/CD out of the box.

There are lots of ways how to serve SPA applications.
Spend less time on adjusting the process of CI/CD and more time on development.

Use CLI features and Cloud Base services for handling that.

For your attention the headless approach to do that.
So, it will be extremely fast because you don’t need to navigate in the browser but just execute CLI commands.

• Create React application using Vite;
• Store on GitHub;
• Deploy on cloud hosting Netlify;

1. Use CLI to install simple boilerplate on React

The most trivial way to init React application is Create React App.
But it takes much time for installing and building process compared with Vite.

npm init vite@latest artem-react

2. Navigate to the project folder and initiate Git

Yes, CRA initiates Git repository out of the box, but for Vite, you need to do that manually.

cd demo
git init

3. Create Repo and Push to GitHub

Don’t spend extra time browsing on GitHub website, just use GitHub CLI to create a repository directly in the project folder.

gh auth login
gh repo create

4. Create ‘main’ branch

Later we are going to link Netlify pipelines, and by default for GitHub project Netlify hook to branch with the name ‘main’. So, need to create that manually.

git checkout -b main

5. Link to Netlify

Cloud-based hosting with serverless backend services and automated build/deploy process. Ideally, match the need for a small project.

Need to do the next steps for deploying the local project to Netlify:

• Install netlify-cli globally (npm i -g netlify-cli)
• Login using the terminal to Netlify
• Init new Web-Site
• Push to GitHub and it will be automatically deployed

netlify login
netlify init

6. Commit and Push

That’s all. Just commit and push the project. Under the hood, the process of build and deploy will be initiated.

git add .
git commit -m "Init app"
git push origin main

7. Enjoy the web-site

You can open your web application in the browser by getting a link in Netlify dashboard or just with the command:

netlify open:site

Finally, we have a fully configurable project.
Just keep improving it :-)

Summary

So, the configuration process takes 1 minute 30 seconds.
Out of the box, we have a good CI/CD environment.

npm init vite@latest react-app
cd demo
git init
gh auth login
git checkout -b main
gh repo create
git push
netlify login
netlify init
git add .
git commit -m "Init app"
git push origin main
gh browse
netlify open