Yesterday, I installed Jenkins and ran my first "Hello World" pipeline.
But that was just the beginning. Today, I connected Jenkins to my actual GitHub repository and created a REAL CI pipeline that automatically builds my entire application.
The result? A fully automated pipeline that pulls code, installs dependencies, builds the frontend, and creates Docker images — all with one click.
First: What is a CI Pipeline?
CI (Continuous Integration) means automatically building and testing your code every time it changes.
The Manual Way (Before)
# Every time you change code:
git pull
cd backend && npm install
cd ../frontend && npm install && npm run build
docker build -t myapp-backend ./backend
docker build -t myapp-frontend ./frontend
# ... repeat forever
The CI Way (After)
# Just push code:
git push
# Jenkins does EVERYTHING else automatically!
Step 1: Connecting Jenkins to GitHub
Creating the Pipeline Job
- In Jenkins dashboard -> "New Item"
- Name:
microservices-ci - Select "Pipeline" -> OK
Configuring GitHub Connection
Scroll down to the "Pipeline" section:
| Field | Value |
|---|---|
| Definition | Pipeline script from SCM |
| SCM | Git |
| Repository URL | https://github.com/Michelle8395/Production-Ready-Microservices-Platform.git |
| Branches to build | */main |
What this does: Jenkins will read the pipeline from a Jenkinsfile in your repository.
Step 2: Creating the Jenkinsfile
A Jenkinsfile is a text file that defines your entire pipeline as code.
Why Pipeline as Code?
| Before (UI configuration) | After (Jenkinsfile) |
|---|---|
| Configuration hidden in Jenkins | Configuration in your repository |
| Hard to version control | Tracked with Git |
| Can't reproduce easily | Anyone can see the pipeline |
| Changes require UI clicks | Changes just need a commit |
The Complete Jenkinsfile
pipeline {
agent any
stages {
stage('Checkout') {
steps {
echo 'Cloning repository...'
checkout scm
}
}
stage('Backend Dependencies') {
steps {
echo 'Installing backend dependencies...'
dir('backend') {
sh 'npm install'
}
}
}
stage('Frontend Build') {
steps {
echo 'Building frontend...'
dir('frontend') {
sh 'npm install'
sh 'npm run build'
}
}
}
stage('Docker Build') {
steps {
echo 'Building Docker images...'
sh 'docker build -t myapp-backend:latest ./backend'
sh 'docker build -t myapp-frontend:latest ./frontend'
}
}
stage('Success') {
steps {
echo 'Pipeline completed successfully!'
}
}
}
}
Understanding Each Stage
| Stage | What it does | Why it matters |
|---|---|---|
| Checkout | Pulls code from GitHub | Always work with latest code |
| Backend Dependencies | Runs npm install | Ensures all packages are available |
| Frontend Build | Installs and builds React | Creates production-ready static files |
| Docker Build | Creates container images | Packages app for deployment |
| Success | Reports completion | Confirms everything worked |
Step 3: Running the Pipeline
Commit and Push the Jenkinsfile
git add Jenkinsfile
git commit -m "ci: add Jenkins pipeline"
git push origin main
Trigger a Build
- In Jenkins, go to
microservices-ci - Click "Build Now"
- Watch the console output
Step 4: Reading Console Output
Success Looks Like This:
[Pipeline] stage
[Pipeline] { (Backend Dependencies)
[Pipeline] sh
+ npm install
added 94 packages in 2s
[Pipeline] }
[Pipeline] stage
[Pipeline] { (Frontend Build)
[Pipeline] sh
+ npm install
added 1314 packages in 5m
+ npm run build
Compiled successfully.
[Pipeline] }
[Pipeline] stage
[Pipeline] { (Docker Build)
[Pipeline] sh
+ docker build -t myapp-backend:latest ./backend
Successfully built xxxxx
+ docker build -t myapp-frontend:latest ./frontend
Successfully built yyyyy
[Pipeline] }
[Pipeline] stage
[Pipeline] { (Success)
[Pipeline] echo
Pipeline completed successfully!
[Pipeline] }
Finished: SUCCESS
What Each Color Means
| Color | Meaning |
|---|---|
| Blue ball | Build in progress |
| Green check | Build succeeded |
| Red X | Build failed |
| Yellow dot | Build unstable (tests failed) |
Troubleshooting Common Issues
Issue 1: "npm: not found"
Error:
+ npm install
/script.sh: 1: npm: not found
Cause: Jenkins container doesn't have Node.js installed.
Fix: Install Node.js in Jenkins container:
sudo docker exec jenkins bash -c "apt-get update && apt-get install -y nodejs npm"
Issue 2: "docker: not found"
Error:
+ docker build
docker: command not found
Cause: Jenkins can't access Docker.
Fix: Update jenkins/docker-compose.yml:
services:
jenkins:
user: root
volumes:
- /var/run/docker.sock:/var/run/docker.sock
Issue 3: Git Clone Failed
Error:
stderr: Permission denied (publickey)
Cause: Jenkins can't authenticate with GitHub.
Fix for public repos: Use HTTPS URL instead of SSH:
https://github.com/username/repo.git
Your Pipeline Architecture
┌─────────────────────────────────────────────────────────────┐
│ JENKINS PIPELINE │
├─────────────────────────────────────────────────────────────┤
│ │
│ Stage 1: Checkout │
│ └── git clone from GitHub │
│ │
│ Stage 2: Backend Dependencies │
│ └── npm install (94 packages) │
│ │
│ Stage 3: Frontend Build │
│ ├── npm install (1314 packages) │
│ └── npm run build (production) │
│ │
│ Stage 4: Docker Build │
│ ├── docker build backend -> myapp-backend:latest │
│ └── docker build frontend -> myapp-frontend:latest │
│ │
│ Stage 5: Success │
│ └── Pipeline completed! │
│ │
└─────────────────────────────────────────────────────────────┘
Key Takeaways
- Pipeline as Code = Your automation lives in Git, not hidden in Jenkins UI
- Stages organize work = Each stage has one responsibility
- Console output is your friend = Always check logs when something fails
- Jenkins needs tools = Install Node.js, Docker inside the container
- CI = Continuous Integration = Build and test every code change
Resources
Let's Connect!
Have you set up a CI pipeline before? What challenges did you face?
Drop a comment or connect on LinkedIn. Let's learn together!
Top comments (0)