Building a modular web application with python flask, Angular, and AWS : Part 4 Setting up a bootstrap theme

Previous: Building a modular web application with python flask, Angular, and AWS : Part 3 Bring in the javascript framework

Hi all, now for the most exciting part! Installing a bootstrap theme.  Ok, ok, you caught me, it’s not really the most exciting part but it will help our page not look like a 1990’s geocities page. If you missed that reference good for you, that also means you missed Ocarina of Time too, in which case I’m sorry.

Anyways to get back on track the free theme we’re going to be using is called the gentelella theme and can be found here .  Let’s talk about this theme real quick, it’s free which is awesome, but most of the elements are built in jquery which isn’t so awesome because the way angular lazy loads templates the jquery code runs before the elements exist on the page.  If you want to hack around at jquery you can convert these to angular components but none the less it serves as a good example on working with a theme in a custom webpage.  If you’d like to use a custom theme where the components are made in Angular 1 the process is roughly the same but a little different, most of the themes i’ve found using Angular1 and especially Angular 4/React are all paid but if you can pay 20 dollars and save yourself an hour doing something in business it’s probably a good idea but that’s all economic opportunity cost analysis which i’ll be talking more about on my personal blog

First we download and extract the theme and poke around.  We can see there are a ton of examples in the production folder. Index.html usually is a good place to start. Let’s open this up in a browser and a text editor.

theme1

Ok this looks like a pretty solid theme, we can see some type of login status, examples of lots of charts if we’re tracking metrics, a drop down email/notification system in the top right, a collapsable menu system on the left, and lots of components we can poke around with. For the scope of this tutorial the basic menu structure, the signed in status, and some kind of messaging template will be of most interest.

Under the extras section we can see a “plain_page” view.  This seems like a straight forward place to start bringing stuff into our project. Let’s open plain_page.html in a text editor.

plain_page

Just skimming the top we can see the basic html structure, the imported css pages, some of the bootstrap common elements like “navbar nav_title” , we can also see font awesome icons even though they weren’t rendering on the local static page.  If we scroll to the bottom we can also see the javascript imports being used by the page. We will most likely want to copy the body of this into our project and import the style sheets. We will also want to break some of this up into angular templates, add our angular tags, and bring in our router view.

Going back into our project lets open up index.html and make those changes stated above.

If you notice the link tags for our javascript and css they reference the python /static folder we set up in previous tutorials. However these libraries don’t exist. We will need to copy the libraries we are using from the theme’s vendor folder into our static folder. These libraries are all released under the MIT license, meaning we can use them as we wish as long as we leave the license details in the headers and don’t release them as our own code.  This allows us to maintain rights to the code we are using them in, very important stuff in a corporate setting or if you are making a page you are wanting to release with a real pay model.  Inside the vendor folder you will also find lots of other libraries that do some cool stuff such as ChartJs, if something sounds interesting feel free to deep dive it on google and play around with it as we won’t be covering most of them here mainly due to time constraints.

If you carefully compare are index.html to the theme’s demo index.html you will see quite a bit is different. First i ripped out a lot of the button in the side navigation.  There is a commented out part where I was going to move the sidebar into a partial but the jquery bug I was talking about above stuck.  As much as I’d like to keep a a stripped down index.html file we will keep the sidebar here for jquery to register it’s event handlers on.

The header has been moved into a partial that angular will load on initialization.  As an exercise try moving the header content from the theme’s index.html into the ‘/static/partials/header.htm’ folder and see if it renders correctly in your page. Also replace the content inside of /static/views/main.htm that we set up last time with the main content from the theme’s page.

You can find that specific content here

If the partials have been set up correctly and the css and javascript files have been copied over into our static/vendors page we should be able to  run our page and see the bootstrap theme as below.

theme2

 

That sure looks a lot better then what we had before doesn’t it.  Comment below if you ran into any troubles.  Next time we will try to work with some AWS IAM and DynamoDB! Please follow me on twitter for that update

Leave a Reply