Skip to content

πŸ• Very basic Bottle kickstart kit with Vue.js and Webpack. Included Axios, Autoprefixer, Babel, Webpack config, demo app with Bulma and Web font loader.

License

Notifications You must be signed in to change notification settings

koddr/bottle-vue-kickstart

Repository files navigation

bottle-vue-kickstart-main

Very basic Bottle kickstart kit with Vue.js and Webpack

GitHub release licence licence

What's included to kit?

Python packages:

  • Bottle 0.12.16 (stable)
  • SQLAlchemy (with bottle-sqlalchemy) latest
  • Jinja2 latest

NPM packages:

  • Axios 0.18+ (AJAX calls)
  • PostCSS/Autoprefixer 7.2+ (automate CSS prefixes)
  • Babel 7+ (turn ES6 code to vanilla)
  • Vue.js 2.6+ (the basis of reactive web applications)
  • Webpack 3+ with config (SCSS, ES6, Vue.js)
  • Web font loader 1.6+ (async load font from Google Fonts)

CSS, styles:

What's Bottle?

Bottle is 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!

Simplify development of reactive web applications β€” use this kickstart kit now!

How to install and use kit?

First, clone this GitHub repository:

foo@bar:~$ git clone https://github.com/koddr/bottle-vue-kickstart.git

Second, install NPM dependencies and make build:

foo@bar:~$ cd bottle-vue-kickstart
foo@bar:~$ npm install
foo@bar:~$ npm run build # or `npm run watch` for hot-reload

Third, prepare your virtual environment:

Since 0.4.2 we use Pipenv project for manage virtual environments.

Install via pip to your system:

foo@bar:~$ pip install pipenv

More info about Pipenv here: Managing dependencies, Python.org.

And now, install Bottle with all extensions:

foo@bar:~$ pipenv install

Yes, virtual environment is automaticaly create. If you want to know system link, just use pipenv --venv.

Result is something like this: /Users/username/.virtualenvs/bottle-vue-kickstart--XXXXXX.

Use it in JetBrains PyCharm, VS Code or else.

Finally, run development server:

foo@bar:~$ python3 run.py

  Bottle v0.12.16 server starting up (using AutoServer())...
  Listening on http://localhost:8080/
  Hit Ctrl-C to quit.

If you did everything right...

Result without database

(Optional) Install database with example objects:

foo@bar:~$ python3 _devtools/install_init_database.py

Now, your yellow section on http://localhost:8080/ will look like this:

Result with database

And we done!

Final app structure

β”œβ”€β”€ _devtools
β”‚Β Β  └── install_init_database.py
β”œβ”€β”€ 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
β”œβ”€β”€ .babelrc
β”œβ”€β”€ .editorconfig
β”œβ”€β”€ .gitignore
β”œβ”€β”€ articles.db
β”œβ”€β”€ package.json
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ Pipfile
β”œβ”€β”€ Pipfile.lock
β”œβ”€β”€ postcss-config.js
β”œβ”€β”€ README.md
β”œβ”€β”€ run.py
└── webpack.config.js

What's next? Build something awesome and make web beautiful again!

Developers

Project assistance

If you want to say Β«thank youΒ» or/and support active development Bottle Vue.js Kickstart:

  1. Add a GitHub Star to project.
  2. Twit about project on your Twitter.
  3. Donate some money to project author via PayPal: @paypal.me/koddr.
  4. Join DigitalOcean at our referral link (your profit is $100 and we get $25).

Thanks for your support! 😘 Together, we make this project better every day.

License

MIT