Skip to content

Customizing the app

Jump to bottom
Vicki Jackson edited this page Oct 14, 2020 · 2 revisions

Customizing

The Flask application is designed to the starting point for your own Flask projects. There are a number of changes you will likely want to make to better support your requirements.

Customize the UI

The application is developed using the Bootstrap framework so it is straightforward to customize the UI. The changes you will likely want to make are in the following areas

Stylesheets

There are some simple stylesheets in the css folder for some of the pages. These reference the images that are shown on the pages also.

You will see some of these stylesheets use different sized images dependent on the width of the browser viewing these pages.

Images and Icons

These are contained in the img folder.

You will see the icon image, in particular, is available in many different sizes. This is to better support the PWA aspect of the site. The guidance for building a PWA application is to have different sized icons so the mobile device can show the correct sized icon depending on the user's mobile.

Templates

The templates used by Flask are within the /app/templates folder. These use the standard Jinja2 formatting language so can be readily changed.

The base.html is used as the basis for nearly all of the other templates. This contains extensive references to JS, CSS (including Bootstrap) files in its HEAD section. It contains a Navbar, placeholder for the content, and a Footer. You will likely want to change this page to better support your needs.

SEO Changes

The base.html contains some code to provide to search engines and other sites when the website is referenced.

The og meta tags are used by sites such as Facebook and Twitter when a tweet, for example, references the website. You will need to update these to reference your own imagery and text.

The description tag is used by search engines.

   <meta property="og:title" content="Flask AWS Template is a starter template for building Flask apps for AWS"/>
    <meta property="og:image" content="{{ url_for('static', filename='img/og-banner.jpg') }}"/>
    <meta property="og:url" content="{{ url_for('main.welcome') }}"/>
    <meta property="og:type" content="website"/>
    <meta property="og:description"
          content="Use this template as a starter for your own Flask based products hosted on AWS"/>

    <meta name="Description"
          content="Use this template as a starter for your own Flask based products hosted on AWS">

There is also a sitemap.xml that you can submit to search engines to help index your site. This will require updates to reference your website URL and pages you'd like to be indexed.

The robots.txt file is used to list pages that shouldn't be indexed. This will also require updates.

References

This Facebook site can help ensure your meta tags are valid.

Google provides some guidance on using the sitemap.xml

PWA Changes

The three key files used to ensure this application meets the PWA criteria are:

Take a look at these and amend accordingly. You will need to update images and descriptions.

An installation button is shown on the welcome.html page. The code to enable this is towards the bottom of the template.

  <script src="{{ url_for('static', filename='js/install.js') }}"></script>
    <script>

        if ('serviceWorker' in navigator) {
            navigator.serviceWorker
                .register('./service-worker.js')
                .then(function (registration) {
                    console.log('Service Worker Registered!');
                    return registration;
                })
                .catch(function (err) {
                    console.error('Unable to register service worker.', err);
                });
        }

    </script>

References

Google have training and guidance on creating a PWA app

Additional routes and functionality

It's a standard Flask application so straightforward to add in additional features that require new templates and routes. Take a look at the design note for further information.

Database changes

The application uses SQLAlchemy, Alembic, and db-migrate to make it straightforward to add new tables and access these tables. models.py defines the database. After making changes to the database, execute

flask db migrate

to generate a new migration script that is stored in the migrations folder.

To upgrade the database, use the following command to apply the latest migrations

flask db upgrade

Clone this wiki locally