This is my personal stack when starting a new project.
I value having a flexible starting point and getting everything up and running as fast as possible.
There are two parts:
- Section 1: Front-End (React + Tailwind)
- Section 2: CI/CD - Google Cloud Build and Google Cloud Run
I hope you find this helpful.
Section 1: Front-End:
- React (with typescript)
purgecssfor minimizing css for production builds
Step 1: Initialize
create-react-app with Dependencies
Step 2: Create Configuration Files
Let's create some empty configuration files.
Create these files with:
Step 3: Setup Configuration Files
Let's put some code into those files.
Add Inter as a font
Step 4: Final Setup
package.json, replace the default
/src/index.js, replace the default code to use our generated
Step 6: Verify Installation
Done! Everything should be setup now.
Let's use some
Tailwind to verify that everything installed properly.
CI/CD - Google Cloud Build and Google Cloud Run
Cloud Run to see the files, we have to setup
nginx in the React project.
We'll do this by making a directory and a
Then, put this code in
Now, we need to setup the
Dockerfile image we're going to build with
Cloud Build and deploy to
Put this code in
This script tells our
CI/CD to build a production version of our website, then to use
nginx as a reverse proxy to serve these files over the internet.
nginx deals with the ports and routing to our React app.
Now, the image built from this
Dockerfile should run fine on
Cloud Run, but we're to setup a separate pipeline to automatically build and deploy our image to production with every commit. Continuous delivery, in other words.
So let's start by creating a
For organization purposes, let's make this file at the root level of our project (as our project is currently inside a folder).
Navigate to the root of your project:
Now put this code inside it.
If you follow the formatting listed here, it should be possible to grok the syntax of this file.
I left in some commented out code to demonstrate what it would look like to have multiple build images in a single repository.
The naming for this hypothetical image is
Note that this configuration doesn't do anything until you actually connect your
Github repository to a cooresponding Google Cloud project.
Projects are the general umbrella for where your CI/CD and deployment will live together.
Let's also create a
.gcloudignore file to make sure our images aren't larger than they need to be.
We'll have to make sure that this file is back inside the
Put this code inside it:
Steps to setup with Google Cloud:
1. Create project on Google Cloud.
2. Enable relevant APIs.
Google Cloud Run API for your project.
Google Cloud Build API for your project.
Google Cloud Build
Go to the
trigger tab on your project's
Google Cloud Build page.
Github account to authenticate and connect your repository to the project.
push trigger to build your app and push to production on every commit.
Google Cloud Build relevant permissions.
Go to the
settings tab in
Google Cloud Build.
You'll see settings for
Service Account Permissions.
Make sure that the
Cloud Run admin permission is set to
Commit your project and push to master.
You should see your project live in a couple of minutes with an autogenerated
6. Deploy again.
Commit a trivial change and push to master again. Wait a couple of minutes, and you should see the updated changes live in your URL.
You can check the progress of the deployment (and any errors that might have occured) in the
Google Cloud Build page in your project.