Testing CI Pipelines and Deploying a Blog App on Vercel

Let’s get hands-on! You’ll deploy a sample blogging app from https://github.com/WesternSydneyUniversity/comp3036-ci-cd-introduction to Vercel and test its CD setup.

Instructions

1. Fork the Repository
   • Go to https://github.com/WesternSydneyUniversity/comp3036-ci-cd-introduction.
   • Click “Fork” to copy it to your GitHub account.
   • Clone it locally: git clone https://github.com/YOUR_USERNAME/comp3036-ci-cd-introduction.git.
2. Push to Github and see if action passes
3. Create a bug and push to Github
4. See if action fails
5. Add auto-marking action to the GitHub Pipeline and see if it reports back to Skillpies. You need to add the following actions, think where you need them!

6.       - name: Test Application
           id: npm1
           uses: WesternSydneyUniversity/autograding-command-grader@v3
           continue-on-error: true
           with:
             working-directory: .
             test-name: Exercise Test
             courseId: ${{env.COURSE}}
             sectionId: exercise-ci-cd-in-ci-cd-and-devops
             command: pnpm test
             timeout: 10
             max-score: 1
   
         - name: Autograding Reporter
           uses: education/autograding-grading-reporter@v1
           env:
             NPM1_RESULTS: "${{steps.npm1.outputs.result}}"
           with:
             runners: npm1

7. Set Up Vercel
   • Sign up at vercel.com (free tier works).
   • From the dashboard, click “New Project” > “Import Git Repository”.
   • Select your forked repo and click “Import”.
   • Vercel auto-detects the Node.js setup. Click “Deploy” (no config changes needed).
8. Test the Production Deploy
   • Once deployed, Vercel gives a URL (e.g., comp3036-ci-cd-introduction.vercel.app).
   • Visit it. You’ll see a simple blog with posts. Click around—check the homepage and post listings.
9. Create a Preview Deployment
   • In your local repo, edit src/App.tsx—e.g., change the header text from “Blog” to “My Awesome Blog”.
   • Commit and push: git add . && git commit -m "Update header" && git push origin main.
   • Go to your Vercel dashboard. Watch the “Deployments” tab—see it rebuild and redeploy.
   • Visit the updated URL. Verify the header changed.
10. Test a Feature Branch
    • Create a branch: git checkout -b feature/add-footer.
    • Add a footer in src/App.tsx (e.g., <footer>Built with CD!</footer> before the closing div).
    • Push it: git add . && git commit -m "Add footer" && git push origin feature/add-footer.
    • In Vercel’s “Deployments” tab, find the preview URL (e.g., feature-add-footer-xyz.vercel.app).
    • Visit it. Confirm the footer appears.
11. Merge and Verify
    • On GitHub, create a pull request from feature/add-footer to main and merge it.
    • Check Vercel—main deploys automatically. Visit the production URL to see the footer live.

What to Check

• Did the preview URL work instantly?
• Did merging update production without manual steps?
• Any issues? Note them (e.g., build errors) for discussion.

This repo’s a basic React app, so it’s perfect for seeing CD in action. Experiment—break it, fix it, deploy it!