A simple demo app that shows Flickr images of Mount Fuji in a slideshow. This app uses the Flickr API and Nodejs to display images from Flickr based on a keyword. It will also cover setting up a Continuous Integration/Continuous Delivery pipeline using Screwdriver and Heroku.
Click on the Fork button on the top right of the repository.
In order to use Screwdriver, you will need to login to Screwdriver using Github and set up your pipeline.
-
Go to the Screwdriver UI.
-
Click on the Create icon (you will be redirected to login if you have not already).
- Click Login with SCM Provider.
- You will be asked to give Screwdriver access to your repositories. Choose appropriately and click Authorize.
- Enter your repository link into the field. SSH or HTTPS link is fine, with #<YOUR_BRANCH_NAME> immediately after (ex:
[email protected]:{YOUR_GITHUB_USERNAME}/fuji-demo.git
). ClickUse this repository
to confirm and then click Create Pipeline. Make note of your pipeline ID.
In order to add the secrets needed for this app to deploy, you will need your Heroku API key and a Heroku app name.
Navigate to your Heroku Account settings page. Find your API Key and click Reveal. Make note this displayed value.
Navigate to the Heroku Apps page. Click New
in the top right corner and select Create New App. Copy your new application name.
Screwdriver has a built in UI for adding secrets as protected environment variables in your build.
Navigate to the Screwdriver Secrets tab at https://cd.screwdriver.cd/pipelines/{YOUR_PIPELINE_ID}/secrets
.
- Add
HEROKU_API_KEY
as the key with your Heroku API key as the value. You do not need toAllow in PR
. - Add
HEROKU_APP
as the key with your Heroku application name as the value. You do not need toAllow in PR
.
Now that you've added the proper secrets, navigate to your Builds page at https://cd.screwdriver.cd/pipelines/{YOUR_PIPELINE_ID}
and click Start
in the upper right corner to start a build. When it's done, refresh the page and click on Next Job
to follow the logs for the Publish job.
You should be able to see your deployed application after the build is done running at https://{YOUR_HEROKU_APP}.herokuapp.com/
.
Note: If you'd like to see your Heroku deployment logs, navigate to the Heroku Activity page at https://dashboard.heroku.com/apps/{YOUR_HEROKU_APP}/activity
. Click View build log
under your latest deployment.
Make a change to your code and push it to your branch. Screwdriver will detect the code change and automatically trigger a new build, causing your code change to go all the way to production!
Change the tag
in line 5 of ./lib/photos.js
from mount fuji
to another monument. Push your changes to Github and navigate to your Screwdriver pipeline to see the change get deployed.
To setup:
$ git clone [email protected]:screwdriver-cd/fuji-demo.git
$ cd fuji-demo/
$ npm install
$ npm test # to test locally
$ npm start # to start locally
Navigate to http://localhost:7000 to see the app.