Skip to content

Latest commit

 

History

History
91 lines (64 loc) · 2.39 KB

README.md

File metadata and controls

91 lines (64 loc) · 2.39 KB
Raw

Flask + React + Postgres Starter

This is a minimal sample Flask and React starter code that demonstrates how both frameworks can be used together in a single page web Application.

The code is based on https://github.com/dternyak/React-Redux-Flask and https://github.com/creativetimofficial/material-dashboard-react

Tutorial

1. Setting Up The Project

  1. Clone the reponsitory
git clone https://github.com/jeffreymew/Flask-React-Postgres.git
cd flask-react-postgres
  1. Create and activate a virtual environment

In Bash

python3 -m venv venv
source venv/bin/activate

In Powershell

py -3 -m venv env
env\scripts\activate

In Powershell

py -3 -m venv env
env\scripts\activate
  1. Install requirements.txt
pip install -r requirements.txt
  1. Import the project folder into VS Code
code .

2. Running The Code Locally

  1. Build the react.js front-end.
npm install
npm run build
  1. Create the SQL database
cd ..
python manage.py create_db
  1. Start the Flask server
python manage.py runserver
  1. Check localhost:5000 in your browser to view the web application.

3. Deploying The Code To Azure

  1. Go to the extensions tab on VS Code

  2. Install the recommended extensions that show up (App Service Extension, Python Extension)

  3. Reload the window and navigate to the Azure tab on the left

  4. Access Azure services through (1) Guest Mode, (2) Creating a free Azure account or (3) signing into Azure with an existing account

  5. Create an App Service instance with the parameters of a linux system with a Python runtime

  6. Create a PostgreSQL database with Azure Database for Postgres and connect it to the App Service instance

  7. Navigate to the Azure portal for the Azure Database for Postgres instance and allow incoming connections to the instance for everyone

  8. Navigate to the Azure portal for the App service instance that was just created, and under the "Application Settings" tab and uneder the "Runtime" section, set the "startup file" parameter to be "startup.txt"

  9. Again under the "Application Settings" tab and under the "Application Settings" section, add a new environment variable for the Postgres

  10. Deploy the code to your newly created App Service instance

License

Copyright (c) Microsoft Corporation. All rights reserved.

Licensed under the MIT License.