-
Notifications
You must be signed in to change notification settings - Fork 84
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
189 additions
and
15,477 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
web: node server.js | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -65,67 +65,83 @@ and then you're supposed to write | |
|
||
All good? Let's start! | ||
|
||
## Fork and clone the repository from github | ||
Go to https://github.com/kantega/heroku-demo and fork the repo into your personal account. | ||
Then, clone the repository from your fork: | ||
## Task 1: Clone the repository from github | ||
Go to https://github.com/kantega/heroku-demo and clone the repository to your computer. | ||
*Do not fork the repo, because this will complicate pull requests later in the tutorial* | ||
|
||
$ git clone https://github.com/<username>/heroku-demo.git | ||
$ git clone https://github.com/kantega/heroku-demo.git | ||
$ cd heroku-demo | ||
|
||
## Create an app | ||
Then, head on over to https://github.com and create a new repository called `heroku-demo` | ||
on your own account. Once the repository is created, type the following commands to connect | ||
your local repository to github. | ||
|
||
$ git remote remove origin | ||
$ git remote add origin [email protected]:<username>/heroku-demo.git | ||
$ git push --force -u origin master | ||
|
||
Now you've got an independent copy of the repository on your github account, and you're | ||
ready to start doing exercises. | ||
|
||
## Task 2: Deploy the app on Heroku | ||
|
||
Now you have the demo app git repository on your own computer. It's time | ||
to launch it on your own personal Heroku cloud. After doing this, you'll | ||
be able to open the app in your browser and see it running. | ||
|
||
*Note* Heroku apps must have unique names, since they're available as | ||
a URL on the Internet. To avoid naming conflicts, please add your | ||
name to the name of the apps you create in this workshop. | ||
github username to the name of the apps you create in this workshop. | ||
|
||
*It is important that you are now in the `heroku-demo` directory*. | ||
Change directory to `heroku-demo` if you have not already done so. | ||
|
||
$ heroku apps:create --region eu <username>-heroku-dev | ||
$ git push heroku | ||
|
||
Counting objects: 18, done. | ||
Delta compression using up to 8 threads. | ||
Compressing objects: 100% (18/18), done. | ||
Writing objects: 100% (18/18), 173.15 KiB | 6.41 MiB/s, done. | ||
Total 18 (delta 0), reused 0 (delta 0) | ||
remote: Compressing source files... done. | ||
remote: Building source: | ||
remote: | ||
remote: -----> Node.js app detected | ||
remote: | ||
remote: -----> Creating runtime environment | ||
|
||
... | ||
|
||
remote: -----> Launching... | ||
remote: Released v3 | ||
remote: https://<username>-heroku-dev.herokuapp.com/ deployed to Heroku | ||
remote: | ||
remote: Verifying deploy... done. | ||
To https://git.heroku.com/<username>-heroku-dev.git | ||
* [new branch] master -> master | ||
Counting objects: 50, done. | ||
Delta compression using up to 8 threads. | ||
Compressing objects: 100% (49/49), done. | ||
Writing objects: 100% (50/50), 1.71 MiB | 1.30 MiB/s, done. | ||
Total 50 (delta 12), reused 0 (delta 0) | ||
remote: Compressing source files... done. | ||
remote: Building source: | ||
remote: | ||
remote: -----> Node.js app detected | ||
|
||
[...] | ||
|
||
remote: -----> Build succeeded! | ||
remote: -----> Discovering process types | ||
remote: Procfile declares types -> web | ||
remote: | ||
remote: -----> Compressing... | ||
remote: Done: 19.1M | ||
remote: -----> Launching... | ||
remote: Released v3 | ||
remote: https://oven-heroku-dev.herokuapp.com/ deployed to Heroku | ||
remote: | ||
remote: Verifying deploy... done. | ||
To https://git.heroku.com/oven-heroku-dev.git | ||
* [new branch] master -> master | ||
|
||
You should now see an app in the Heroku Dashboard. You may need to | ||
refresh the page. Use the dashboard to open the app (there's a button | ||
in the upper right corner that says "Open app"), and you should see a | ||
spinning React logo. | ||
beautiful unicorn. | ||
|
||
|
||
## Create a pipeline | ||
## Task 3: Create a pipeline | ||
|
||
Now that you have an app, you can add it to a pipeline. A pipeline is where you | ||
keep your development, staging and production apps. The app you just created | ||
had a name that ended in `-dev`. That's because it's the app that we're going | ||
to put in the development stage of your pipeline. | ||
keep your development, staging and production apps. | ||
|
||
Create a pipeline called `<username>-heroku`. Add the `<username>-heroku-dev` app | ||
you just created to the development stage of the pipeline. | ||
|
||
Let's create the development stage now: | ||
Use this command: | ||
|
||
$ heroku pipelines:create --app <username>-heroku-dev --stage development <username>-heroku | ||
heroku pipelines:create --app <app name> --stage <development|staging|production> <pipeline name> | ||
|
||
You should see something like this: | ||
|
||
|
@@ -136,134 +152,129 @@ And the Heroku Dashboard should look something like this: | |
|
||
![Dev app](dev-app.png) | ||
|
||
This command also added the `<username>-heroku-dev` app to the newly created stage. | ||
|
||
## Create an app for the staging stage | ||
## Task 4: Create an app for the staging stage | ||
|
||
To be able to keep a separate environment for development and testing purposes, | ||
you'll need to create another app. This is often referred to as a "staging" app. | ||
It's mainly used as a preview of what will be deployed to production. | ||
|
||
Let's create the app, and add it to the pipeline: | ||
It helps to add `-staging` to the end of the app name to keep the apps apart. | ||
|
||
$ heroku apps:create --region eu <username>-heroku-staging | ||
$ heroku pipelines:add --app <username>-heroku-staging --stage staging <username>-heroku | ||
Use these commands: | ||
|
||
And the Heroku Dashboard should look something like this: | ||
heroku apps:create (you know this one already) | ||
heroku pipelines:add --app <app name> --stage <stage name> <pipeline name> | ||
|
||
Afterwards, the Heroku Dashboard should look something like this: | ||
|
||
![Staging app](staging-app.png) | ||
|
||
## Promote the development app to staging | ||
## Task 5: Promote the development app to staging | ||
|
||
At the moment, there's nothing running on the staging app. You need to | ||
deploy something. You've already created, compiled and run a development | ||
version of your app. To copy that (without rebuilding), you can simply | ||
promote the app from the development stage to the staging stage. | ||
|
||
$ heroku pipelines:promote --app <username>-heroku-dev | ||
You can promote the development app through the heroku dashboard, or you can use | ||
this command: | ||
|
||
Visit https://username-heroku-staging.herokuapp.com/ to see your staging app | ||
(or open it from the Heroku Dashboard) | ||
heroku pipelines:promote --app <app name> | ||
|
||
## Edit a file and push to development | ||
## Task 6: Make a small change to the app, and push to heroku | ||
|
||
Make a small change to `src/App.js`. You can use any editor you like. I use vim. | ||
Make a small change to `public/index.html`. You can use any editor you like. | ||
|
||
$ vim src/App.js | ||
|
||
Then commit and push to heroku. You are now pushing to the development version, since heroku apps:create | ||
Then commit to git and push to heroku. You are now pushing to the development version, since heroku apps:create | ||
created the heroku remote for you, and subsequent calls to heroku apps:create does not overwrite that. | ||
|
||
$ git add . | ||
$ git commit -m "ove was here" | ||
$ git push heroku | ||
|
||
Then, reload https://username-heroku-dev.herokuapp.com/ - You should be able to see your changes. | ||
Also, reload https://username-heroku-staging.herokuapp.com/ and observe that the changes are not there. | ||
Check to see that your changes were deployed to the development app. Also check the staging app and observe | ||
that your changes are *not* there. | ||
|
||
## Promote the development app to staging again | ||
## Task 7: Promote the development app to staging again | ||
|
||
You've now completed development of your new feature, and you'd like to share it | ||
with your customer. To do this, you promote the app again, like you did before. | ||
|
||
$ heroku pipelines:promote --app <username>-heroku-dev | ||
|
||
## Exercise: Production | ||
## Task 8: Production | ||
|
||
Create a production app, connect it to the pipeline and promote staging to production. | ||
|
||
## Connect to github | ||
## Task 9: Connect to github | ||
|
||
To enable automatic deploys when someone on the team pushes to github, we need to connect Heroku to github | ||
and enable automatic deploys. | ||
|
||
Bring up the Heroku console, and observe the following banner on top: | ||
|
||
"Connect this pipeline to GitHub to enable additional features such as review apps, | ||
automatic deploys, and Heroku CI" | ||
|
||
Click "Connect to GitHub" to do just that. Enter heroku as the name of the repository to connect | ||
Click "Connect to GitHub" to do just that. Enter `heroku-demo` as the name of the repository to connect | ||
to, and return to the pipeline view. | ||
|
||
## Enable automatic deployment | ||
## Task 10: Enable automatic deployment | ||
|
||
It is considered a best practice to always keep the master branch deployed | ||
to the development environment. To set it up so that Heroku automatically deploys master to the development | ||
stage, go to the Heroku Dashboard, click the arrow next to "<username>-heroku-dev" and select "Configure automatic deploys...". Choose | ||
the master branch, and click "Enable Automatic Deploys". | ||
|
||
Now, make a small change to `src/App.js`, save and push to github. After a few seconds. you should see | ||
Now, make a small change to your app, commit and push to *github* (not to heroku). After a few seconds. you should see | ||
"Building app" in the Heroku console. | ||
|
||
## Enable Review Apps | ||
## Task 11: Enable Review Apps | ||
|
||
Heroku can automatically deploy any pull requests you make on github. This enables anyone who is reviewing | ||
your pull request to see the changes in action. In the Heroku console, click "Enable Review Apps...". | ||
|
||
Heroku will ask you for a parent app to copy settings from. Select "<username>-heroku-dev" and click | ||
"Create an app.json file". You can review the settings it proposes, and select "Commit to repo". Then, | ||
select "<username>-heroku-dev" as the app to inherit config vars from, and finally | ||
check the box next to "Create new review apps for new pull requests automatically". Click "Enable" to | ||
save your changes. | ||
|
||
You should now see a message saying "There are no open pull requests on <username>/heroku". | ||
|
||
## Create a pull request | ||
Heroku will ask you for a parent app to copy settings from. Select "<username>-heroku-dev". This will make | ||
sure that any settings made to the development app are also made to the review apps. | ||
|
||
Since you committed a new `app.json` file in the previous step, you need to pull that commit before | ||
carrying on. | ||
|
||
$ git pull | ||
Make sure to check the box next to "Create new review apps for new pull requests automatically". Click "Enable" to | ||
save your changes. | ||
|
||
Then, create a branch with some changes | ||
You should now see a message saying "There are no open pull requests on `<username>/heroku-demo`". | ||
|
||
$ git checkout -b my-pr-1 | ||
$ vim src/App.js ## make some changes | ||
$ git commit -a -m "I made some changes" | ||
$ git push -u origin my-pr-1 | ||
## Task 12: Create a pull request | ||
|
||
Now you can create a pull request from your branch. | ||
*Note* Make sure you select your own master branch as the base, otherwise the pull request will be made | ||
against the repository you forked from, and that repository is not connected to your Heroku. | ||
When working with pull requests, you must create a branch, commit some changes to that branch and push the branch | ||
to github. You're then able to create a pull request from the branch, which is basically the same as | ||
requesting a code review from your team mates. If your team mates approve of your changes, you can merge the pull | ||
request. Your changes will then be part of the master branch. | ||
|
||
Visit this URL to create the pull request: | ||
https://github.com/username/heroku-demo/pull/new/my-pr-1 | ||
- Create a new branch and make some changes to the code. Maybe replace the picture of the unicorn with a cat | ||
(or something else, if you like), change the background color, add some more content, or whatever you like. | ||
- Create a pull request from your new branch | ||
|
||
Again, make sure you select *your own master branch* as the base, not Kantega. | ||
Tip: use `git push -u` when pushing your branch to github for the first time. | ||
|
||
Then, head back to the heroku console, where you should find that Heroku is already busy building | ||
and deploying an app for your pull request. | ||
|
||
## Inspect and review the pull request | ||
## Task 13: Inspect and review the pull request | ||
|
||
Now you're ready to do a proper code review. Look to the person sitting next to you, and go through | ||
the pull request on GitHub together. Demonstrate the changes by pulling up your review app in the | ||
browser, and show how the running review app differs from the running development version. | ||
|
||
## Merge pull request | ||
## Task 14: Merge pull request | ||
When you've done the code review, head on over to github and approve and merge the pull request. Heroku will immediately remove the | ||
review app. Since you also configured automatic deployments to development, you will also see a progress | ||
indicator next to "Building app" in the development stage. | ||
|
||
When this is done, you can refresh the development app, and you should see that your changes have been published. | ||
|
||
## Final task: Promote to production | ||
You've now set up the entire pipeline and finished one new feature. You can now promote the development version | ||
of your app to staging, let the person next to you try it out by giving them the staging URL, and finally | ||
promote staging to production. | ||
|
||
Happy hacking! | ||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
{ | ||
"name": "booster-pipelines", | ||
"scripts": { | ||
}, | ||
"env": { | ||
}, | ||
"formation": { | ||
"web": { | ||
"quantity": 1 | ||
} | ||
}, | ||
"addons": [ | ||
|
||
], | ||
"buildpacks": [ | ||
{ | ||
"url": "heroku/nodejs" | ||
} | ||
] | ||
} |
Oops, something went wrong.