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