Getting Started with Bottle

I had a little trouble getting started with Bottle. The main thing was that I had trouble accessing my own Javascript in Bottle’s BasicTemplates. The trick was to do two things:

  1. Allow templates to access the “get_url” function
  2. Create an endpoint to serve your own static pages yourself

Here is my file structure:


First, is simple. Line 9 defines a route for static files, line 14 is my main page, and line 19 provides some data that we will serve dynamically on the main page.

import bottle
from bottle import run, template, static_file

app = bottle.default_app()
bottle.BaseTemplate.defaults['get_url'] = app.get_url

@app.route('/static/:path#.+#', name='static')
def static(path):
    return static_file(path, root='static')

def index():
    return template('templates/index.tpl')

def get_vin():

run(host='localhost', port=8080)

The base template imports bootstrap, jquery, and my own javascript.

<!DOCTYPE html>
  	  {{title or 'No Title'}}
  	<link href="" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
    <script   src=""   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
    <script type="text/javascript" src="{{ get_url('static', path='js/handlers.js') }}" charset="utf-8"></script>

The index template, which inherits from the base template is pretty simple. I have an empty div tag where some data will go when the page loads, and a button.

%rebase('templates/base.tpl', title='Index')
<div id="data"></div>
<button class="btn btn-default" id="first-btn">Click</button>

Finally, handlers.js hits our /data endpoint when the page loads, and provides some behavior (an alert) when we click a button on the page.

$(document).ready(function() {
  $.get('/data', function(data, status) {
    $('#data').append("Data: "+data)

Leave a Reply

Your email address will not be published. Required fields are marked *