Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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.
https://github.com/koddr/bottle-vue-kickstart
autoprefixer axios bottle bottlepy bulma bulma-css-framework kickstart kit pipenv vue vuejs vuejs2 webpack
Last synced: 10 days ago
JSON representation
🍕 Very basic Bottle kickstart kit with Vue.js and Webpack. Included Axios, Autoprefixer, Babel, Webpack config, demo app with Bulma and Web font loader.
- Host: GitHub
- URL: https://github.com/koddr/bottle-vue-kickstart
- Owner: koddr
- License: mit
- Created: 2017-03-17T11:23:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-25T04:46:56.000Z (16 days ago)
- Last Synced: 2024-10-26T18:16:08.870Z (14 days ago)
- Topics: autoprefixer, axios, bottle, bottlepy, bulma, bulma-css-framework, kickstart, kit, pipenv, vue, vuejs, vuejs2, webpack
- Language: HTML
- Homepage: https://github.com/koddr/bottle-vue-kickstart
- Size: 1.16 MB
- Stars: 90
- Watchers: 7
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Very basic Bottle kickstart kit with Vue.js and Webpack
[](https://github.com/koddr/bottle-vue-kickstart) [](https://www.python.org/downloads/) [](https://github.com/koddr/bottle-vue-kickstart/blob/master/LICENSE.md)
## 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](https://github.com/jgthms/bulma) `latest`
## What's Bottle?
[Bottle](http://bottlepy.org/) 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:
```console
foo@bar:~$ git clone https://github.com/koddr/bottle-vue-kickstart.git
```
Second, install NPM dependencies and make build:
```console
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](https://github.com/pypa/pipenv) project for manage virtual environments.
Install via `pip` to your system:
```console
foo@bar:~$ pip install pipenv
```
> More info about Pipenv here: [Managing dependencies, Python.org](https://packaging.python.org/tutorials/managing-dependencies/#managing-dependencies).
And now, install Bottle with all extensions:
```console
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:
```console
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:
```console
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
```console
├── _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](https://github.com/koddr) (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](https://twitter.com/intent/tweet?text=I%20found%20cool%20starter%20pack%20with%20%23Python%20%40bottlepy%20and%20%23JavaScript%20%40vuejs%20%F0%9F%91%8D%20Also%2C%20include%20configured%3A%20%40webpack%2C%20%23axios%2C%20%40Autoprefixer%20and%20%40babeljs%20%F0%9F%8E%89&url=https%3A%2F%2Fgithub.com%2Fkoddr%2Fbottle-vue-kickstart).
3. Donate some money to project author via PayPal: [@paypal.me/koddr](https://paypal.me/koddr?locale.x=en_EN).
4. Join DigitalOcean at our [referral link](https://m.do.co/c/b41859fa9b6e) (your profit is **$100** and we get $25).
Thanks for your support! 😘 Together, we make this project better every day.
## License
MIT