Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abulte/dokku-simple-python-vue-spa
Demonstrates a simple python api with a postgres database and a vuejs SPA, deployed on dokku.
https://github.com/abulte/dokku-simple-python-vue-spa
dokku flask postgresql python vuejs
Last synced: 7 days ago
JSON representation
Demonstrates a simple python api with a postgres database and a vuejs SPA, deployed on dokku.
- Host: GitHub
- URL: https://github.com/abulte/dokku-simple-python-vue-spa
- Owner: abulte
- License: mit
- Created: 2020-05-08T10:12:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T17:30:36.000Z (almost 2 years ago)
- Last Synced: 2024-08-01T13:39:05.048Z (3 months ago)
- Topics: dokku, flask, postgresql, python, vuejs
- Language: Vue
- Size: 3.83 MB
- Stars: 4
- Watchers: 4
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# dokku-simple-python-vue-spa
Demonstrates a simple python api with a postgres database and a vuejs SPA, deployed on dokku.
## Usage
### Development
Launch backend:
```
python3 -mvenv pyenv
. pyenv/bin/activate
cd backend
python cli.py init-db
FLASK_DEBUG=1 FLASK_APP=app flask run
```
Launch frontend:
```
cd frontend
yarn
yarn serve
```
The frontend is available on http://localhost:8080 and uses the API available at http://localhost:5000.
### Production (dokku)
This project uses two buildpacks, `node` and `python`, to build and install both frontend and backend.
On the dokku server, prepare the postgres database and create the app:
```
dokku apps:create simple-spa
dokku postgres:create simple-spa
dokku postgres:link simple-spa simple-spa
```
On local copy:
```
git remote add dokku dokku@{host}:simple-spa
git push dokku master
```
The deployment process will run `init-db` thanks to the Procfile.
Get a SSL certificate and redirect to https:
```
dokku letsencrypt simple-spa
```
:rocket: https://simple-spa.{host}/api
### Tweaks
- Use multiple buildpacks, cf `.buildpacks` file.
- Double `package.json`: node buildpack only works with a `package.json` at the root of the project. The root `package.json` "proxies" installation to the `frontend` dir through the `post-install` script. The first `yarn install` install dev dependencies w/ `production=false`, then runs the build in `frontend`, then installs again w/ `production=true` to prune dev dependencies (similar to what the buildpack should be doing on its own but doesn't because our frontend is in a subdirectory).
- `requirements.txt` is kept at the root of the project for the same reasons.
- `Procfile` uses `--chdir` for `gunicorn` and `package.json` uses `--cwd` for `yarn`.
## Initial setup
How this repo has been built (result is commited).
### frontend
```
yarn global add @vue/cli @vue/cli-service-global
vue create frontend
# vue features: vuex, router w/ history mode
```
```
rm -rf frontend/.git
git init
```
In `frontend/vue.config.js`:
```javascript
module.exports = {
outputDir: '../dist',
assetsDir: 'static'
}
```
```
cd frontend && yarn build
```
### backend
```
python3 -mvenv pyenv
. pyenv/bin/activate
mkdir backend && cd backend
# write code :-)
```
### Credits
Inspiration: https://github.com/oleg-agapov/flask-vue-spa