Git Product home page Git Product logo

mmazon_clone's Introduction

Flask React Project

This is the starter for the Flask React project.

Getting started

  1. Clone this repository (only this branch)

    git clone https://github.com/appacademy-starters/python-project-starter.git
  2. Install dependencies

    pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt
  3. Create a .env file based on the example with proper settings for your development environment

  4. Setup your PostgreSQL user, password and database and make sure it matches your .env file

  5. Get into your pipenv, migrate your database, seed your database, and run your flask app

    pipenv shell
    flask db upgrade
    flask seed all
    flask run
  6. To run the React App in development, checkout the README inside the react-app directory.


IMPORTANT! psycopg2-binary MUST remain a dev dependency because you can't install it on alpine-linux. There is a layer in the Dockerfile that will install psycopg2 (not binary) for us.


Dev Containers (OPTIONAL for M1 Users)

The following instructions detail an optional development setup for M1 Mac users having issues with the psycopg package.

  1. Make sure you have the Microsoft Remote - Containers extension installed.

  2. Make sure you have Docker installed on your computer.

  3. Clone the repository (only this branch)

    git clone https://github.com/appacademy-starters/python-project-starter.git
  4. Open the repo in VS Code.

  5. Click "Open in Container" when VS Code prompts to open container in the bottom right hand corner.

  6. Be Patient! The initial install will take a LONG time, it's building a container that has postgres preconfigured and even installing all your project dependencies. (For both flask and react!)

    Note: This will take much less time on future starts because everything will be cached.

  7. Once everything is up, be sure to make a .env file based on .env.example in both the root directory and the react-app directory before running your app. You do not need a DATABASE_URL in the .env file if you are using this Docker setup for development - the URL is already set in the image (see .devcontainer/Dockerfile for the URL).

  8. Get into your pipenv, migrate your database, seed your database, and run your flask app

    pipenv shell
    flask db upgrade
    flask seed all
    flask run
  9. To run the React App in development, checkout the README inside the react-app directory.


Deploy to Heroku

This repo comes configured with Github Actions. When you push to your main branch, Github will automatically pull your code, package and push it to Heroku, and then release the new image and run db migrations.

  1. Write your Dockerfile. In order for the Github action to work effectively, it must have a configured Dockerfile. Follow the comments found in this Dockerfile to write your own!

  2. Create a new project on Heroku.

  3. Under Resources click "Find more add-ons" and add the add on called "Heroku Postgres".

  4. Configure production environment variables. In your Heroku app settings -> config variables you should have two environment variables set:

    Key Value
    DATABASE_URL Autogenerated when adding postgres to Heroku app
    SECRET_KEY Random string full of entropy
  5. Generate a Heroku OAuth token for your Github Action. To do so, log in to Heroku via your command line with heroku login. Once you are logged in, run heroku authorizations:create. Copy the GUID value for the Token key.

  6. In your Github Actions Secrets you should have two environment variables set. You can set these variables via your Github repository settings -> secrets -> actions. Click "New respository secret" to create each of the following variables:

    Key Value
    HEROKU_API_KEY Heroku Oauth Token (from step 6)
    HEROKU_APP_NAME Heroku app name
  7. Push to your main branch! This will trigger the Github Action to build your Docker image and deploy your application to the Heroku container registry. Please note that the Github Action will automatically upgrade your production database with flask db upgrade. However, it will not automatically seed your database. You must manually seed your production database if/when you so choose (see step 8).

  8. Attention! Please run this command only if you wish to seed your production database: heroku run -a HEROKU_APP_NAME flask seed all

Helpful commands

Command Purpose
pipenv shell Open your terminal in the virtual environment and be able to run flask commands without a prefix
pipenv run Run a command from the context of the virtual environment without actually entering into it. You can use this as a prefix for flask commands
flask db upgrade Check in with the database and run any needed migrations
flask db downgrade Check in with the database and revert any needed migrations
flask seed all Just a helpful syntax to run queries against the db to seed data. See the app/seeds folder for reference and more details
heroku login -i Authenticate your heroku-cli using the command line. Drop the -i to authenticate via the browser
heroku authorizations:create Once authenticated, use this to generate an Oauth token
heroku run -a <app name> Run a command from within the deployed container on Heroku

mmazon_clone's People

Contributors

bartdorsey avatar calebbraaten avatar idbentley avatar jballa91 avatar jshafto avatar k-dodsonknapp avatar leahstern-aa avatar nish-arya avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.