We're live-coding on Twitch! Join us!
Flask App Automatic Deploy & Edit  from Github to Heroku

Flask App Automatic Deploy & Edit from Github to Heroku

Deploy and Connect

  1. Create Github Account.
  2. Go to https://github.com/cp-example/c9_flask_portfolio_app and Fork this repository. To do this just click on the Fork button on the upper right hand corner. You need to Fork the app so that you can make your own customisations. Forking basically tells Github that I really like this application, I want to make a copy of it for myself so that I can do my own thing and make this application my own.
  3. On the Repository homepage click the Deploy to Heroku button.
  4. You will be presented with the following screen. If you already have an Heroku account you can use the login button that is in the top right hand corner. Otherwise create a free Heroku account, you will need to verify your your email on the next screen.
  5. Once you have successfully signed up or logged in you will be presented with the following screen. You can choose your own name for the app, this name will be used as the domain name in the URL. Click on the Deploy App button. Set the region to United States.
  6. This will initiate the build and you will see some build logs. Wait for this to finish and you will see this screen.
  7. Click on view and you will see your brand new Flask app Live on the internet!
  8. The final step is to connect Heroku to your Github account so that any changes you make to your code on Github will automatically sync to your Heroku app. Go back to the previous window and this time click Manage App.
  9. Under the Deploy section you will see the Connect to Github button. Click on this.
  10. You will see the following section, read this and then click on Connect to Github and Authorise Heroku.
  11. Now Heroku is connected to your Github account you want to give this app access to the repository you previously forked. Enter in the name c9_flask_portfolio_app as it appears below. Click Enable Automatic Deploys
  12. You can edit the app name under Settings.

Edit Flask App via Github

Every change that you now make to your code on Github will automatically sync with your online Flask App on Heroku. So here are some potential changes that you can make to the app.

1. Edit CP Flask App headline.

In Github navigate to the code section of your repository and click into the templates folder You will see an index.html file. Click into index.html. This file contains all the text that you see on the About Section of the App. Click on the edit pencil button Use cmd + f (Mac) or ctrl + f (Windows) and search for the words 'CP Flask'. Change the text to whatever you want. When you have done this, scroll to the bottom of the page and press the green Commit changes button. Add an update message and an optional description. Leave commit directly to the master branch checked. Now navigate back to Heroku and under the Activity feed you should see a new update. Open app to confirm the changes are live on your Flask app.

2. Change Social Icons URL

Navigate to the templates folder on your Github repository. Click on your index.html file. Click edit. This time Find the word 'a href'. The section that you want to edit is the footer section. You want to change this part of the code. You can enter a Facebook page that you own. Enter your commit message and click Commit Changes Go to Heroku, check the activity log to see if there are any new changes, click on Open app or if the app is already open in another tab just refresh the page, click on the Facebook icon in the footer section and you should now be redirected to your new URL.

3.Change Portfolio Section Image

First we need to add your new image. Under the code section of your Github repository navigate to static/img/portfolio - this is where all the portfolio images are stored. Click on upload files Drag your new image in here. Add a commit message and click Commit changes. Next navigate to templates/ index.html Click Edit. Find the words 'img src' When you come to the porfolio section you want to change 'chesstastic.jpeg' to the name of the image that you have put in the portfolio images folder Add a commit message and click Commit changes. Go to Heroku to see the changes made. You can replace the link it directs too using the exact same steps from the previous Change Social Icons URL step.

If you would prefer to make your edits in an online IDE like Cloud 9 and then deploy to Github read Clone and Edit Github Repo using AWS Cloud 9.

The main advantage of this is that you can preview your changes in Cloud 9 first so when it is deployed to Github and then Heroku you won't end up breaking something unexpectedly.