Posted on 2020-05-13T09:42:16Z by Kevin Foong
Slugs are great for SEO and humans alike. For example, "/post_detail/vue-spa-and-flask-together" looks much better than "/post_detail/8".
In Python it is very easy to create slugs from the title of your blog post. Just use the excellent python-slugify library. The command is simple.
slugify("Vue Spa and Flask Together")
This will give you the slug "vue-spa-and-flask-together"
Now in order to use the slug you will need to store it in your database. As you will be using the slug to query the database instead of the post id, you will also need to ensure that the slug is unique before saving to your database.
For the full source code of how this can be done view my Github page.
Tags:
flask
python
SEO
Posted on 2020-05-13T09:26:47Z by Kevin Foong
Sitemaps are handy to let search engines know which pages they should crawl on your website. There is a way to automatically create a sitemap.xml route for your Flask website which will always reflect the latest pages on your site. That is everytime you add a route, it will automatically reflect in your sitemap.xml
You can see this site's dynamic sitemap at https://www.kevin7.net/sitemap.xml
The full code is shown below. The key points are:
- Create a route as per normal and name the route "sitemap.xml"
- To get all the static routes just read in the app's "url_map" method via the "iter_rules" method and include any route that is a HTTP "GET" method.
- For the static routes you can just use an arbitary sitemap last modified date to be 10 days prior to today.
- To get all the dynamic routes (blog postings, etc) you will need to connect to your database, read in each blog posting, and manually build your routes. If your blog post has a timestamp in the database, then use that for the sitemap last modified date.
- Finally render sitemap.xml via a template. Make sure you specify the header to be "application/xml" or else it won't render correctly.
Read more ...
Tags:
flask
SEO
Posted on 2020-05-12T09:06:49Z by Kevin Foong
In this blog post I will provide an overview of how to get Flask to serve a Vue Single Page Application (SPA). I assume you already have the prerequisites installed - namely node.js, Vue and Python.
Vue
1. Use Vue to create your project.
vue create myproject
2. In the Vue CLI select "Manually select features"
For a SPA make sure you choose Router. The rest is your preference.

Read more ...
Tags:
flask
Vue
API
Posted on 2020-05-11T12:11:16Z by Kevin Foong

Bulma is one of the most friendly and intuitive CSS frameworks I have come across. This is how you setup a workflow using node-sass to customise Bulma for your web development project.
1. Install node.js on your computer
2. Create a folder called "mybulma" and run npm init
3. Install these two packages:
npm install node-sass --save-dev
npm install bulma --save-dev
4. In "package.json" amend the "css-build" output to exactly where you want the CSS to output to. This will be the location of your web project's CSS folder and filename. For example mine below will output "mybulma.css" to the "../blog/app/static/styles/" folder.
Read more ...
Tags:
CSS
Bulma
Posted on 2020-05-10T12:50:46Z by Kevin Foong
Follow these steps to easily use VueJS on your existing (traditional) web page. This example below is based on a Flask website.
1. In your base template add a link to the Vue CDN. Make sure the Vue script tags are at the bottom of body
and not inside head
. This is because the div id="app"
needs to be loaded first before we initialise Vue.
The {% block scripts %}
tag is where your custom scripts will go later.
......
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Custom Javascript -->
{% block scripts %}
{% endblock %}
</body>
</html>
Read more ...
Tags:
flask
Vue
Posted on 2020-05-10T12:41:32Z by Kevin Foong
Flask-Migrate is a great tool which allows Flask developers, using SQL Alchemy, to amend their database on the fly. This is important because it means you wont have to destroy your current table and any data within it, in order to make any changes.
Miguel Gringberg (who is also the author of Flask-Migrate and Flask guru) has a great blog post on how to use Flask-Migrate so I won't go through the basics here. I will however provide a few tips that I have learnt along the way.
Out of the box Flask-Migrate does not detect changes you make to the database field's size or type. For example it will not detect if you change a field from varchar (50) to varchar (100).
To solve this, when you instantiate Flask-Migrate, just make sure you add "compare_type = true" like so.
migrate = Migrate(compare_type=True)
Read more ...
Tags:
flask
flask-migrate