DEV Community: Vikas Singh

How to create a microsite in next website on gcp server?

Vikas Singh — Wed, 26 Nov 2025 06:49:09 +0000

First go to the microsite folder. Upload the zip file of the microsite lets say abc.zip.

Then bring the abc zip to the current directory.

Then unzip the folder

Visit the abc folder directory. Where there is package.json , give the command NPM INSTALL and NPM RUN BUILD.

Then in same directory give this below command:
ls -l /etc/apache2/sites-enabled

Find the relevant config files. In my case it was seglko.conf and seglko=ssl.conf .

Open these conf files and add the routing rules for abc site one by one in both files.

After that build the file of abc by using command : NPM RUN BUILD
After that restart the server of apache. sudo systemctl restart apache2

All Linux commands for GCP

Vikas Singh — Wed, 26 Nov 2025 05:46:39 +0000

change directory: cd directory name
List file and folder: ls
Just Read a file: less filename
Edit a file: nano filename
Save File after edit: ctrl O + enter + ctrl X

Create a new file: cat<<'EOF'>Filename
filecontent
EOF

Jump to a new line:Ctrl + _ or Ctrl + shift + -
Remove file: rm filename
Rename file: mv file file1

Clear previous build: rm -rf .next out build dist
create build: npm run build
Restart server: pm2 restart appname(selgko)

Create tar backup: tar -cvf filename.tar
Then click on download file in ssh to download file.

GCP : How to fix Application client side error

Vikas Singh — Sun, 09 Nov 2025 11:37:25 +0000

Go to the directory where there is package.json file. Run these commands

1.Clear old build.
rm -rf .next out build dist

npm run build
Restart server.
pm2 restart your-app-name(seglko)

GCP: Go to specific line of code on ssh / linux

Vikas Singh — Sun, 09 Nov 2025 11:29:28 +0000

Jumping to specific line of code while making changes is an important part.

After nano filename.jsx

Press Ctrl + _ (that's Control + underscore)
Type the line number (e.g., 42)
Press Enter

After less filename.jsx
Just type the line number

Ring Based deployment

Vikas Singh — Sun, 09 Nov 2025 11:19:13 +0000

Microsoft used Ring Based deployment to integrate GraphQL to Microsoft teams. So i got curious about Ring based deployment.

So what we will learn:
What is Ring Based deployment?
What is so special about it?
When to use it?

Ring based deployment is like a rehearsel for your software- start small, fix fast and then go big. It is special because it balances speed with safety. Use it when you have a large userbase and when stability and trust matter.

What is Ring based deployment?
It is a phased rollout strategy where updates are released in RINGS:
First ring: a small group (like internal testers )
Next rings: Gradually larger user groups.
Final ring: Full production roll out.

What is special about it?
-Catches bugs early, Reduces risk of mass outages, Enables fast rollback if something breaks.

When should you use it?
-When releaseing critical updates
-For large scale apps with many users
-When uptime and stability are top priorities.
-During feature flag rollouts or A/B testing

How to understand large typescript codebase

Vikas Singh — Sun, 09 Nov 2025 06:24:06 +0000

-Check package.json, identify dependencies, scripts, and entry points

-Review tsconfig.json: Learn about compiler settings, path aliases,
and strictness levels.

-Understand folder structure: like src/ components/ utils/ hooks/

-Read test cases like tests/ or tests : these contain unit and
integration tests.

-Trace the flow.Looks for index.ts file, they often serve as entry points.

-Follow imports to understand how modules connect.

-Explore interface and types which are often used.

-Use UNKNOWN instead of any for safer type handling.

-Run tests locally to observe how modules interact.

-Use SOURCEGRAPH or CodeTour to visualize codebases.

-After understanding , teach the codebase to someone.

-Draw a sketch or diagram if possible.

How to understand large Golang codebase

Vikas Singh — Sun, 09 Nov 2025 06:20:37 +0000

Check go.mod and go.sum. These files contain dependecies and module version
Understand the folder structure.
Understand common directories like
cmd/: entry points
pkg/: reusable packages
api/ models/ services/
Trace execution flow: start from main.go and then follow initialisatio
logic, dependency injection if used, routing,
Read tests like _test.go
Use tools like sourcegraph to visualize dependencies.

GCP to GitHub CI/CD Setup Steps

Vikas Singh — Sun, 02 Nov 2025 05:35:25 +0000

Which Should You Use?
GitHub Actions: More flexible if you already use GitHub workflows
Cloud Build: Better integration with GCP, especially for multi-service deployments

Step 1: Download Code from GCP to Local ,If code is on Compute Engine VM:

Step 2: Initialize Local Git Repository

Step 3: Create GitHub Repository
-Create new repo at GitHub.com
-Do not initialize with README
-Copy repository URL

Step 4: Connect to GitHub
Step 5: Enable GCP APIs
-Enable Cloud Build API
-Enable Cloud Build GitHub App

Step 6: Connect GitHub to Cloud Build
-Go to Cloud Build → Triggers
Click Connect Repository
Choose GitHub (Cloud Build GitHub App)
Authenticate and select repository

Step 7: Create Cloud Build Trigger
Step 8: Create cloudbuild.yaml File for app engine, cloud run
and cloud storagae.

Step 9: Test Automation
Step 10: Verify Deployment
-Check Cloud Build → History
-Wait for green checkmark
-Verify live site updated

Step 11: Set Permissions
Ensure Cloud Build service account has:

App Engine: App Engine Admin role
Cloud Run: Cloud Run Admin role
Cloud Storage: Storage Admin role

Part 2: Steps for a site Development

Vikas Singh — Sun, 02 Nov 2025 05:18:06 +0000

5. Automated deployment Setup
5.1 Create GitHub Actions Workflow
Create .github/workflows/deploy.yml:

5.2. Alternative: Using Cloud Build
Create cloudbuild.yaml in project root:

6.GCP Infrastructure setup
6.1. Create Storage Bucket

Create bucket
Configure as website
Make files publicly accessible

6.2. Set Up Load Balancer (For Custom Domain)
Create HTTP(S) Load Balancer
Add bucket as backend
Configure SSL certificate

7.Connect GitHub with GCP
7.1. Create Service Account
Go to IAM & Admin > Service Accounts
Create new service account
Add roles: Cloud Build Editor, Storage Admin

7.2. Generate and Add Secrets to GitHub

Create JSON key for service account
Add to GitHub Secrets:

GCP_SA_KEY = Service account JSON
GCP_PROJECT = Project ID
GCP_BUCKET_NAME = Your bucket name

8.Domain Configuration (If Using Custom Domain)
8.1. DNS Configuration
8.2. SSL Certificate
Use Google-managed SSL certificate
Update load balancer with domain

9.Testing the Pipeline
9.1. Make a Test Change

9.2. Monitor Deployment
Check GitHub Actions tab
Verify Cloud Build logs
Test live site

10.Ongoing Development
Workflow for Changes:
Make changes locally
Commit and push to GitHub
GitHub Actions automatically:
it Builds React app
it Deploys to GCP Storage
Changes go live in 2-5 minutes

Part 1: Steps for a site Development

Vikas Singh — Sun, 02 Nov 2025 04:52:10 +0000

Develop locally with React.
Set up GitHub repo.
Configure GCP Services.
Test your site is working locally.
Connect custom domain.
Set up automation.
Make changes via GitHub

Develop locally with React.
# Create React app locally first npx create-react-app my-website cd my-website git init git add . git commit -m "Initial commit"
Set up GitHub repo. Connect local repo to github
# Connect local repo to GitHub git remote add origin https://github.com/yourusername/your-repo-name.git git branch -M main git push -u origin main

Repo structure
my-website/ ├── public/ ├── src/ ├── build/ (generated) ├── .github/workflows/ (CI/CD) └── package.json

3.Configure GCP Services.

3.1. GCP Project Creation
Go to Google Cloud Console

Create new project
Enable billing account

3.2. Required Services
Enable these services:

Cloud Build (CI/CD)
Cloud Storage (Hosting)
IAM (Permissions)

4.React App configuration.
4.1. Create build script in package.json
{ "name": "my-website", "homepage": "https://your-domain.com", "scripts": { "build": "react-scripts build", "predeploy": "npm run build", "deploy": "gh-pages -d build" } }

How to run a nextjs project after cloning from github

Vikas Singh — Fri, 31 Oct 2025 07:47:41 +0000

Step 1. Run npm install
Step 2. If you get peer dependency error,
Run npm install --legacy-peer-deps
Step 3. Run npm run build
Step 4. Run npm run dev

How to renew ssl certificate on gcp (Apache server)

Vikas Singh — Fri, 31 Oct 2025 06:52:20 +0000

Fist open the ssh into your VM.

Step 1: Check Current Certificate Status for websitename.in
sudo certbot certificates

Step 2: Install Certificate for websitename.org
sudo certbot --apache -d websitename.org -d www.websitename.org

Step 3: Type number 2 : Redirect

if you are given ooptions to redirect.

**NOTE: **Replace websitename.org with your site name