Creating Boilerplate Code
#main.py
import os
from controllers.index import Index
    
app = Index()
    
if 'DYNO' in os.environ:
  app.run(host='0.0.0.0', port=os.environ.get('PORT', 8000))
else: 
  app.run(host='localhost', port=8000, debug=True, reloader=True)
#controllers/index.py
import config
from bottle import Bottle, template, static_file

class Index(Bottle):
    def __init__(self):
        super(Index, self).__init__()
        self.route('/static/images/<filename>', callback=self.loadImage)
        self.route('/static/styles/<filename>', callback=self.loadStyle)
        self.route('/static/scripts/<filename>', callback=self.loadScript)
        self.route('/static/fonts/<filename>', callback=self.loadFont)

        self.route('/', callback=self.index)

    def loadImage(self, filename):
        return static_file(filename, root='./public/images')

    def loadStyle(self, filename):
        return static_file(filename, root='./public/css')

    def loadScript(self, filename):
        return static_file(filename, root='./public/js')

    def loadFont(self, filename):
        return static_file(filename, root='./public/fonts')

    def index(self):
        return template('index', data=config.kdict)


<!--views/index.tpl-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>{{data['blogTitle']}}</title>
    <script src="/static/scripts/jQuery.js"></script>
    <script src="/static/scripts/main.js"></script>
    <link href="/static/styles/main.css" rel="stylesheet"></link>
    <link href="/static/images/site_logo.png" rel="icon" ></link>
    <link href="/static/fonts/setup.css" rel="stylesheet"></link>
  </head>
  <body>
    <p>ស្វាគមន៍​មក​កាន់​កម្មវិធី​រៀន​វាយ​អក្សរ​ខ្មែរ!</p>
  </body>
</html>

GitHub: https://khmerweb-typing.herokuapp.com
Heroku: https://khmerweb-typing.herokuapp.com/