Very basic kickstart Bottle kit with Vue.js
Simplify development of reactive web applications on Bottle – lightweight WSGI micro web-framework for Python! A simple process of installing and deploying. Everything has already been done for you. Just enjoy writing your code!
What is this?
Kickstart kit included latest version of
- Axios (for make AJAX calls)
- Babel (for turn ES6 code into readable vanilla)
- Vue.js (for reactive 'em all)
- Webpack (for pack 'em all)
For visual design I use Bulma. This is a modern CSS framework based on Flexbox. Small and smart. If you haven't seen it before I promise – you'll like it!
How to install?
First, clone this git repository:
$ git clone email@example.com:koddr/bottle-vue-kickstart.git
npm dependencies and make build:
$ cd bottle-vue-kickstart $ npm install && npm run build
Third, prepare your virtual environment:
Next, install Bottle and all extensions:
(venv) $ pip install -r requirements.txt (venv) $ deactivate
Finally, run development server:
$ python3 run.py Bottle v0.12.13 server starting up (using AutoServer())... Listening on http://localhost:8080/ Hit Ctrl-C to quit. ...
If you did everything right...
(Optional) Install database with example objects:
Now, your yellow section on http://localhost:8080/ will look like this:
And we done!
Final app structure
├── static │ ├── assets │ │ ├── js │ │ │ └── script.js │ │ └── scss │ │ └── style.scss │ ├── css │ │ └── style.min.css │ ├── images │ │ └── bottle-vue-kickstart-logo-horizontal.svg │ └── js │ └── script.min.js ├── templates │ ├── index.html │ └── layout │ └── base.html ├── articles.db ├── install.py ├── package.json ├── requirements.txt ├── run.py └── webpack.config.js
What's next? Build something awesome and make web beautiful again!
If you want help, we will be glad reviews about
Bottle Vue kickstart kit on personal blogs (including Twitter), online media and/or specialized IT-portals. Thank you!