How to create a fully functional blog with Alpas, Kotlin, and Tailwind — part 1: setup project…

#framework #alpas #blog #kotlin

How to create a fully functional blog with Alpas, Kotlin, and Tailwind — part 1: setup project, database, and routes

In this multi-part series, I’ll walk you through, step-by-step, on how to create your very own, fully functional blog using Alpas, Kotlin, and Tailwind CSS.

In this part 1 guide, we will setup an Alpas project, database, and routes.

With just a little added TLC and a dash of personal flair, you will be in the position to deploy your very own blog with its own lightweight Content Management System (CMS) - all built by you! 📰

The main features of the blog that you will create are

Ability to create a new blog post
Ability to manage (edit/delete) blog posts
Validation that proper metadata and content exists before post submission
Ability to page and navigate between blog posts

The main Alpas features you will use and learn are

Connecting to and working with a database
Create custom validation rules
Convert markdown to HTML
Persisting inputted content on failed form validations
Page blog posts, including previous/next navigation

Step 1: Start your project

Head over to the Alpas Starter project on GitHub and setup your new blog using the stater template. Perform the initial steps required to successfully run your starter template.

💡 If you need help on getting started, review the Alpas Installation Doc and the first couple steps of the Quick Start Guide to get rolling on setting up an Alpas project.

Step 2: Setup your database and blogs table

Setup a new local database and connect to it from within your project.
Create a new blog entity using ./alpas make:entity blog command
Update the Blog.kt entity file to include id, content, created_at, and updated_at fields
Create a blogs table using ./alpas make:migration create\_blogs\_table --create=blogs command
Migrate your blogs table to your database using ./alpas db:migrate command

Perfecto! We have completed the database portion. Now, let’s get into creating routes.

💡 Check your progress against blog.kt and don’t forget to uncomment addConnections(env) in the DatabaseConfig file

📄 Related Documentation

Step 3: Setup your database and blogs table

Routes. It’s where routing happens! 😂

Open the routes.kt file and add the following:

private fun RouteGroup.webRoutesGroup() {
    get("/", BlogController::index).name("welcome")
    get("/<page>", BlogController::pages).name("pages")
    get("blog/<id>/<page>", BlogController::show).name("blog.show")
    get("blog/new", BlogController::new).name("blog.new")
    post("blog/submit", BlogController::submit).name("blog.submit")
    get("blog/edit/<id>", BlogController::edit).name("blog.edit")
    patch("blog/edit/<id>", BlogController::update).name("blog.update")
    delete("blog/<id>", BlogController::delete).name("blog.delete")
}

Notice, we removed the WelcomeController route as we will only use BlogController. You can update the WelcomeController import to be BlogController as well. We will create the BlogController in future post within this series.

Browsing through the different routes, you can easily gather what the main front-end user interactions will be:

Main index / welcome page
Paging for when your blog has multiple posts — in this exercise we will display 9 posts per page
Showing the blog post detail page
Submitting a new blog post
Enter an Edit mode for blog posts where you update the post’s content
Remove a blog post

💡 Check your progress against routes.kt