A concise skeleton for building web apps using Angular 2, Flask, PostgreSQL, and Heroku.
A concise skeleton for building single-page web apps with Angular 2, Flask, PostgreSQL, and Heroku.
git clone https://github.com/maangulo12/starter-kit.git
cd starter-kit
vagrant up
This step may take some time. Please be patient.
vagrant ssh
It may ask you to enter a passphrase and a password.
Passphrase for key: (just press Enter)
Password: vagrant
cd /vagrant/
gulp
The Starter-Kit aims to provide a starting template with all the tools necessary for building single-page applications on the cloud. The project consists of the following stack:
Before getting started with the Starter-Kit, a few dependencies need to be installed first. These dependencies include:
Download these if you have not already download them.
You will need to install these dependencies so that the Starter-Kit works accordingly. The Starter-Kit uses both Vagrant and VirtualBox to setup and configure a virtual machine that will allow you to run the application inside the virtual machine. This virtual machine is configured using a Vagrantfile that will install dependencies inside the virtual machine in order to run the application. Notice that the application will run inside the virtual machine, and not your local computer. Vagrant will also install PostgreSQL and will setup the database for your application. A picture of how Vagrant and VirtualBox work together is illustrated below.
For more information about Vagrant, go to this link.
starter-kit/
backend/ * our backend (server-side) code folder
| __init__.py * our main module for this app
| config.py * our app config module
| models.py * our database models
view.py * our app views
api/ * our API folder
v1/ * our API v1 folder
| __init__.py * our API v1 package module
| auth.py * implements the API v1 endpoint for authentication
endpoints.py * implements the API v1 endpoints
(this module can be broken into multiple modules or packages)
|
docs/ * contains documentation about the starter-kit
| all files (this folder should be deleted after downloading the starter-kit)
frontend/ * our frontend (client-side) code folder
| app/ * our Angular 2 app folder (all the app components go in here)
| assets/ * our assets folder (contains all CSS, images, and JavaScript files)
| build/ * our build folder (contains all the compiled files)
| index.html * our index (initial) page
systemjs.config.js * our SystemJS config file
local/ * our local config folder
pg_hba.conf * config file used by Vagrant for authenticating to the local database
pg_ident.conf * config file used by Vagrant for authenticating to the local database
|
.gitignore * specifies files that git should ignore
app.json * specifies information required to run the app on Heroku
gulpfile.js * our build system file for automating tasks
manage.py * our Python script for performing commands
package.json * specifies our Node dependencies
Procfile * what Heroku uses to deploy the app
README.md * README file
requirements.txt * specifies our Python dependencies
runtime.txt * specifies our Python runtime version
server.py * our Python script for running the app
tsconfig.json * specifies options for the TypeScript compiler
typings.json * specifies packages needed by the TypeScript compiler
Vagrantfile * what Vagrant uses to configure the virtual machine
We use PostgreSQL as the database engine/server for this Starter-Kit. PostgreSQL is an object-relational database that enables us to store data securely and retrieve data using the relational database model. For more information about PostgreSQL, go to this link.
In this Starter-Kit, the PostgreSQL database is installed inside the virtual machine (thanks to Vagrant). The database can be viewed through a client application using the crendentials below.
Host: localhost
Port: 5432
Database: app_db
Username: postgres
Password: password
pgAdmin is a free to use, open-source management, and administration client for PostgreSQL. pgAdmin can be used to manage and view your database, tables, and data. To download pgAdmin, go to this link.
In this Starter-Kit, we use a script called manage.py to automate the process of setting up the database. This script is used to automatically create the tables in the database from the Python models. Here is how you can use it.
After implementing all the Python models, use this command to create the tables in the database. Make sure you are inside the vagrant folder in the virtual machine.
python3 manage.py create
You can view the new tables created in pgAdmin.
Use this command to drop all the tables from the database. Make sure you are inside the vagrant folder in the virtual machine.
python3 manage.py drop
You can check if the tables were dropped in pgAdmin.
To deploy the app on Heroku, first create an account on Heroku.
After creating the account, open the command-line and type the following and make sure you are inside the virtual machine.
heroku login
After login into Heroku via the command line, type the following command.
heroku create
After creating the app, type the following command.
git push heroku master
Now your app should be deployed on Heroku!
This Starter-Kit uses the following versions:
In Heroku:
Follow steps 3 through 8 from above.
Close the browser. Restart the application. Cancel the gulp command (press CTRL-C) and run the gulp command once again. Open the browser again and go to http://localhost:3000. If that does not fix the issue, delete all the browser history and refresh the page again.