Skip to content

Instantly share code, notes, and snippets.

@sdebaun
Last active July 23, 2019 02:45
Show Gist options
  • Save sdebaun/17bab2bf6b967c7af5419abc8815787f to your computer and use it in GitHub Desktop.
Save sdebaun/17bab2bf6b967c7af5419abc8815787f to your computer and use it in GitHub Desktop.

deployment environments

There are two environments that we deploy to that have different combinations of code and backing data.

In general, anything committed to any of the three existing release/* branches will trigger an automatic deployment via Azure.

Once you commit, watch the #pm-dev-notify channel for automatic notifications from azure that your committed code has been deployed. Look for a message that says TODO: Which message confirms the deployment? Is there something cheap and cheerful we can do like, "put your slack name in your commit message to get pinged when deployment is complete?"

TODO: these links are to the admin login which is used for impersonation, should also include link to regular login

Environment Host Deployment Branch URLs Purpose
dev app-dev release/dev Admin Login deploy here for internal development testing if theres any chance it will introduce breaking changes.
qa app-qa release/qa Admin Login deploy here when you have work that you think is complete and ready to be tested. you can deploy partially completed work for preemptive qa but note in asana card subtasks what still needs to be done, describe it in such a way that it can be understood by testers.

different data in different environments

qa and dev both are both backed by different database instances.

When you're working on stuff via accel-css, you should be using the tampermonkey script on the app-qa host. this ensures that when work goes through the qa process that they are testing with the same data that you developed to.

deploying accel-css

Much of our work is being done in css in the separate project accel-css. To deploy work done there, you need to pipe it through this project.

initial project setup

clone with recurse-submodules

IMPORTANT! Clone the project with the --recurse-submodules flag.

git clone https://github.com/PlusMinusSays/Agile1VmsCode.git --recurse-submodules && cd Agile1VmsCode

You should see something like:

stevo:~ sdebaun$ git clone https://github.com/PlusMinusSays/Agile1VmsCode.git --recurse-submodules && cd Agile1VmsCode
Cloning into 'Agile1VmsCode'...
remote: Enumerating objects: 159, done.
remote: Counting objects: 100% (159/159), done.
remote: Compressing objects: 100% (118/118), done.
remote: Total 17517 (delta 66), reused 78 (delta 41), pack-reused 17358
Receiving objects: 100% (17517/17517), 370.01 MiB | 6.21 MiB/s, done.
Resolving deltas: 100% (11777/11777), done.
Checking connectivity... done.
Checking out files: 100% (12520/12520), done.
Submodule 'accel-css' (https://github.com/PlusMinusSays/accel-css.git) registered for path 'accel-css'
Cloning into '/Users/sdebaun/Agile1VmsCode/accel-css'...
Submodule path 'accel-css': checked out 'b070aa3d074c83c4ff7621eb86edbabfc0d7ee34'

Checkout the remote branches

git checkout --track --force remotes/origin/release/dev && git checkout --track --force remotes/origin/release/qa

should show you results like:

stevo:Agile1VmsCode sdebaun$ git checkout --track --force remotes/origin/release/dev && git checkout --track --force remotes/origin/release/qa
Branch release/dev set up to track remote branch release/dev from origin.
Switched to a new branch 'release/dev'
Branch release/qa set up to track remote branch release/qa from origin.
Switched to a new branch 'release/qa'
stevo:Agile1VmsCode sdebaun$

deploying

The deployment pipeline pulls from the accel-css dev branch. When you do this, whatever is in that branch will be deployed to the environment

TODO: how do we deploy possibly-breaking-changes to dev while still allowing deployments to qa?

Merge to master:

git checkout --force master && git pull && git submodule update --remote && git commit -am "accel-css submodule merge" && git push

To dev:

git checkout --force release/dev && git pull && git submodule update --remote && git commit -am "accel-css submodule merge" && git push

To qa:

git checkout --force release/qa && git pull && git submodule update --remote && git commit -am "accel-css submodule merge" && git push

If there are new changes in accel-css to deploy, you should see output like:

stevo:Agile1VmsCode sdebaun$ git checkout --force release/dev && git pull && git submodule update --remote && git commit -am "test deployment with dummy change" && git push
Already on 'release/dev'
Your branch is up-to-date with 'origin/release/dev'.
Already up-to-date.
remote: Enumerating objects: 7, done.
remote: Counting objects: 100% (7/7), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 7 (delta 3), reused 4 (delta 2), pack-reused 0
Unpacking objects: 100% (7/7), done.
From https://github.com/PlusMinusSays/accel-css
   b070aa3..3c047dd  dev        -> origin/dev
Submodule path 'accel-css': checked out '3c047dd04f6e78be6e8e4ea3830b1947ca334843'
[release/dev f33fbcf] test deployment with dummy change
 1 file changed, 1 insertion(+), 1 deletion(-)
Counting objects: 2, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (2/2), 260 bytes | 0 bytes/s, done.
Total 2 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/PlusMinusSays/Agile1VmsCode.git
   3bd118e..f33fbcf  release/dev -> release/dev
stevo:Agile1VmsCode sdebaun$

If nothing has changed, you should see output like:

stevo:Agile1VmsCode sdebaun$ git checkout --force release/dev && git pull && git submodule update --remote && git commit -am "MY DEPLOYMENT MESSAGE HERE" && git push
Already on 'release/dev'
Your branch is up-to-date with 'origin/release/dev'.
Already up-to-date.
On branch release/dev
Your branch is up-to-date with 'origin/release/dev'.
nothing to commit, working directory clean
stevo:Agile1VmsCode sdebaun$

pixel-perfect development

On the screens we're building, its very important to keep things on the grid and spaced according to design spec. Here's the best process we've found so far:

  1. get the Pixel Parallel extension for chrome and install it.
  2. go to the page youre working on
  3. click on the extension's icon in the toolbar and enable it. you should see a popup in the lower right.
  4. go to the figma design for the full-page view you're working on.
  5. select the page frame, and find its entry in the navigator list on the lower left.
  6. right click on that entry, and select "copy as..." and "png".
  7. go back to the pixel parallel popup in your browser window.
  8. click "paste here" which should change the dotted line outline to a solid line. Then ctrl+v to paste the view's screenshot.
  9. click on the eyeball in the pixel parallel popup to turn the overlay on and off.

Note that when the overlay is on, you won't be able to click on or interact with anything on the page, so you have to turn it on or off as needed.

Repeat steps 4-9 when you work on new pages.

testing

TODO: when do you log in with regular login, when do you impersonate, steps for impersonation, how to know who to impersonate when testing

  1. use the "Admin Login" link from the table above to log in with the master account
  2. click "Sign in as a Client, Vendor, or Applicant"
  3. put the username in the search box and hit enter
  4. click on the user id that comes up from the search result
  5. there is no step 5
  6. you will be logged in as that user and taken to the main dashboard
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment