koddr / bottle-vue-kickstart

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

Very basic Bottle kickstart kit with Vue.js and Webpack

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:

• Bulma CSS framework latest

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...

(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:

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

• Idea and active development by Vic Shóstak (aka Koddr).

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