Code Monkey home page Code Monkey logo

flask-vue-project-seed's Introduction

flask-vue-project-seed

SPA quick start using Python, Flask, and Vue.js. Containerized with Docker.

Requirements

  • docker
  • docker-compose
  • make (optional)

What is this repo and how do I use it?

This repository is meant to be a full-stack web application starting point. It contains these basic parts and features:

General:

  • Containerized with Docker and Docker Compose
  • Frontend code built with Webpack
  • Example full-stack 'wall message' web application

Backend:

  • Python3 and Flask
  • MySQL database container and driver
  • Redis cache container and driver
  • Architecture:
    • API (interface endpoints, call into service layer, format response)
    • Services (operate on data objects, business logic)
    • Data Objects (stateful models, represent deserialized records, implements CRUD)
    • Data Store Drivers (intermediary interface between application and datastore)

Frontend:

  • Vue.js
  • vue-router
  • Architecture:
    • Services (handle state and business logic, injectable into views and components)
    • Views (top level page components)
    • Components (UI building blocks, reusable, nestable)

More Information:

make up runs a Vue frontend server, a backend JSON API server, a MySQL database, and a Redis cache. Changes to frontend source files and backend source files are automatically reflected via hot-reload.

Getting started with the full-stack app example:

First, spin-up the dev environment:

make up

Then, connect to the app server container:

make app-shell

Once connected, run the table creation python script:

cd /app/server/scripts/ && python3 create-wall-message-table.py

Lastly, navigate to the 'wall messages' dev web page and create some messages:

http://localhost:4000/wall-messages

Other convenience make commands

Connect to app server container:

make app-shell

Connect to MySQL container:

make mysql-shell

Connect to Redis container:

make redis-shell

Tech Stack:

OS/Containerization:

  • Docker
  • Docker Compose
  • Alpine

Languages:

  • Python3
  • Node.js
  • Javascript ES6

Datastores:

  • MySQL
  • Redis

Backend:

  • Flask
  • Supervisor

Frontend:

  • Vue.js
  • Scss

Tools:

  • npm
  • pip3
  • Adminer
  • Webpack

flask-vue-project-seed's People

Contributors

hsadler avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

flask-vue-project-seed's Issues

mysql_driver.py method name misspeled ?!

As I was going to try out this nice full stack architecture there occourred an error while initializing the front end server using the table creation python script ("cd /app/server/scripts/ && python3 create-wall-message-table.py").

I need permission to commit the changes, so while missing these I wanted to give you my feedback and code changes using the issue section.

file app/server/scripts/create-wall-message-table.py in line 23

	attribution VARCHAR(255)
)

"""
-query_result = mysql_driver.query(query_string=create_table_query)
+query_result = mysql_driver.query_bind(query_string=create_table_query)

ppp('result of create table query:', query_result)

Greetings from Munich
Mario

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.