Skip to content

Latest commit

 

History

History
415 lines (268 loc) · 9.82 KB

PITCHME.md

File metadata and controls

415 lines (268 loc) · 9.82 KB

Get to production!

https://github.com/worthington10TW/hello-karta Matthew Worthington


Prerequisites

  • VueCli
  • HerokuCli
  • CircleCI
  • Git
  • Docker
  • Powershell/ bash & cUrl
  • Node/ Npm

What is a CI/CD pipeline?

  • Initiates code builds
  • Runs automated tests
  • Deploys your code

Why do we use them?

  • Reduce cost of deployment
  • Remove manual errors
  • Provide standardized feedback loops
  • Enable fast product iterations.

Risk reduction

  • Low-risk releases are incremental
  • Decouple deployment and release
  • Focus on reducing batch size
  • Optimize for resilience

Best practice

  • Only build packages once
  • Deploy the same way to every environment
  • Smoke test your deployments
  • Keep your environments similar

Triggers

  • Code commit
  • Scheduled/ CRON
  • Manual

‘You build it, you run it’


1. Build

Build


2. Code quality gate

Quality gate


3. Test automation

Test


4. Publish

Publish


5. Deploy to staging

Staging


6. Smoke tests

Smoke


7. Manual approval

Manual gate


8. Deploy to prod

Production


TADA!

Pipeline


What will we be using?

logo logo logo logo logo logo logo logo


What accounts will I need?

logo logo logo


Lets get going

https://github.com/worthington10TW/hello-karta


Validate tools

```
vue --version
heroku --version
git --version
docker --version
node --version
npm --version
curl --version
```

Fork

Fork

https://github.com/worthington10TW/hello-karta


Clone

Clone


Follow

Clone

https://circleci.com


Generate a token

CreateToken

https://circleci.com/account/api


You've created your first pipeline!

FirstPipeline


Create your apps

And setup env variables

App name < 25 char

chmod +x ./.scripts/app-builder.sh
./.scripts/app-builder.sh [Your app name] [circleCI token]
//Or powershell users
./.scripts/app-builder.ps1 [Your app name] [circleCI token]

Did it work?? https://dashboard.heroku.com/apps https://[your-app-name]-staging.herokuapp.com/ https://[your-app-name].herokuapp.com/


Did it work?

https://[your-app-name].herokuapp.com/ https://[your-app-name]-staging.herokuapp.com/ NewApp


Create a vue project

cd ..
vue create --preset ./hello-karta/.vue hello-karta
//Merge when prompted

remember to copy package.json from ./.scripts to the root


VueJS

  • Simplicity
  • Testable
  • Flexibility
  • Fast and small

Cheatsheet

npm run serve
npm run test:unit
npm run test:e2e
npm run build

Cypress

logo

Test that the homepage links to the about page


Lets create a pipeline!

Pipeline


Circle CI

  • Workflows for job orchestration
  • First-class Docker support
  • Language-agnostic support

Get to staging

Manual gate


Get to prod

Pipeline


New requirement

  • As a user
  • I want to see how many times I click a button
  • So that I can test out my amazing TDD skills

New requirement

  • As a user
  • I want to see how many times I click a button
  • So that I can test out my amazing TDD skills

The ticker starts at 0 The ticker state is not persisted Ticker to increment by on each click