• Flask + Angular Full-Stack Tutorial Part 1 - Setting Up (5-16-16)


    1. Intro
    2. Skipping to Part 3
    3. Before We Begin
    4. Setting Up
    5. Cloud9
    6. Bash and Cloud9 Basics
    7. Wrapping Up


    We are going to be building a web app that lets users manage a list of their pets. In reality, that idea is pretty dumb, but it works well for the purposes of this tutorial. You’ll learn how to:

    • setup a development environment
    • create and normalize a Postgresql database,
    • connect it to a Flaskified backend,
    • write an API,
    • create an Angular JS frontend,
    • connect the API to the frontend,
    • wire the frontend and the backend together,
    • implement session authentication,
    • learn how to make a live feed of site activity by utilizing web sockets,
    • create unit and end-to-end tests,
    • deploy the app

    Skipping to Part 3

    The steps that we will be doing from here until Part 3 of the tutorial series are:

    1. Creating a directory in linux called "pet-app"
    2. Creating a virtualenv called "pet-app" with python version 3.4 using virtualenvwrapper

    So if you are an experienced linux user and have used virtual environments before, those steps should be pretty easy, in which case you’ll probably want to skip to the Flask content in Part 3. Otherwise, the material in Parts 1 and 2 will explain how to do the above steps in depth.

    Before we begin

    That is a TON to learn, which is why we are sticking with the simple idea of an app that handles multiple users managing multiple pets. Also, unlike a lot of other tutorials I’ve read, I am going to try to explain every little thing that is either entered into the terminal or typed as code. That means that there are going to be sections of material that experienced programmers most likely already know (and may skip over) but which I’ve included to help beginners understand what is going on at each stage of the process. Sections that more experienced programmers may want to skip over are outlined with a dashed border. Before we start doing any actual coding, we need to set up our development environment and review/learn some basic commands.

    Setting up

    To work around the differences of everyone’s individual operating systems, we will be using a free service called Cloud9 to run our linux development environment. I will be testing each step of the tutorial on both Cloud9 and on my own linux installation, so if you do not want to use Cloud9 you can follow along in your regular linux environment. And if you have never used linux before, I will explain all the commands you need for this tutorial as they appear.


    To start using Cloud9, you need to sign up for a free account. Once you have an account, you will be able to view your dashboard. In your dashboard, there is a section called “Workspaces” that shows a default workspace and an option for you to make a new workspace. Click on “Create a new workspace”, and you will be taken to a form that lets you setup your new workspace. Give your workspace a Workspace name, Description, select either public or private (does not matter, private means only you may access the workspace), enter an optional Git URL (you can still use Git later if you don’t fill this out), and in the “Choose a template” section select “Blank”. Then click “Create workspace”.

    Once the workspace is finished being created, Cloud9 will display it. The workspace consits of several main areas: on the left is the file manager, on the bottom is a tab area where a bash terminal is displayed by default, in the center is a tab area where the Cloud9 IDE README is displayed by default, and at the very top is the workspace menu. You can resize/ re-arrange your workspace to a certain extent, but I am going to be doing the tutorial using the default layout.

    Bash and Cloud9 Basics

    In the bash terminal (at the bottom), you'll see a string (called the command prompt) that looks something like this:

    username:~/workspace $

    The part before the colon corresponds to your cloud9 username, and the part after the colon and before the dollar sign is the directory (folder) you are currently in. Click inside the bash terminal and type:


    This is the "list" command in linux, and it lists the files and folders in the current directory. When you push enter to execute the command, you should see just one file listed, README.md, which corresponds to the contents of your file manager (on the left). Now we are going to make a new folder that will contain our pet manager app files and folders. In the terminal, type:

    mkdir pet-app

    The mkdir command in linux means "MaKe DIRectory", and the thing you type after mkdir (an "argument" to mkdir) is what you are naming your new directory. So "mkdir pet-app" means "make a new directory called pet-app" and place it inside the current directoy. Instead of "pet-app", you could call your new directory anything you wanted to (as long as it is a valid name), but if you are a beginner then I recommend using the names as they are. After executing this command you should see your new directory in the file manager. In order to change into the new folder you just created to make it the current directory, type:

    cd pet-app

    The cd command means "Change Directory", and it takes the folder you want to change into as its argument. After you execute this command, you should see "pet-app" as the current directory in the command prompt:

    username:~/workspace/pet-app $

    Now we are going to make a file to put in this directory. There are several different ways to create new files, but for now we're going to use the least-difficult-to-begin-with method which is with Cloud9's graphical user interface (GUI). In the top tab area, where the README.md is displayed, click on the "+" tab and select "New File". Notice you can also create a new file by using the Cloud9-specific shortcut "Alt-N" (you may have to click inside your file manager first to make this work). Type "some text" in the file editor. Now save the file by either going to the top menu -> File -> Save or by using the shortcut "Ctrl-S". In the window that pops up, name your file "test.txt" in the Filename text input and notice the bottom text input that is labeled "Folder". This displays the directory you are going to save your file into. Since we want to save our file into the pet-app directory, click on it in the list of files/folders below the Filename text input. Click save. Now you should see a new file in your file manager under the pet-app directory, and if you type "ls" into the terminal, you'll see text.txt listed. At this point, your workspace should look something like this (my lower tab area is bigger since I dragged its edge up to enlarge it):

    Now let's delete everything we just made! :smiley: There are several ways to do this, but we'll do things with a few bash commands. First, we will get rid of the file "test.txt" by typing into the terminal:

    rm test.txt

    The rm command means "ReMove" a file, and takes the name of the file to be removed as an argument. After you execute the command, you'll see that test.txt is removed from the pet-app directory in the file manager, and that nothing is listed if you execute the ls command in the terminal. Next, we are going to remove the pet-app directory. Since pet-app is our current directory, we are going to change out of it and into its parent directory (we are moving "up a level" or backwards in the directory structure) in order to delete it. To change into the parent directory of the current directory, type into the terminal:

    cd ..

    We are using the same cd command as before, but this time the argument is (two periods) '..', which changes us into the parent directory. If we executed the command (with one period) 'cd .', it would change us into the same directory we are already in (the current directory stays the same). Our command prompt should now have "workspace" as the current directory, as it was when the workspace was first opened. To delete the directory pet-app, type into the terminal:

    rmdir pet-app

    The command rmdir means "ReMove DIRectory", and takes the name of the directory you want to remove as the argument (similar to the command rm). Note that this command worked since pet-app was an empty directory, but if it had files or folders in it we would need the command rm -rf pet-app (which means "remove the specified directory after recursively removing the files and folders inside it"). So now our workspace file manager should look just as it was when it was first created.

    Wrapping up

    Finally, let's create the pet-app directory again and change into it. If you want to, you can remove the README.md file while inside the pet-app directory using the following command:

    rm ../README.md

    This means "remove a file that is located in the parent directory (../) and is called README.md".

    In part 2, we will install some software using the terminal in order to get started coding.