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

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

1. Setup a new local database and connect to it from within your project.
2. Create a new blog entity using ./alpas make:entity blog command
3. Update the Blog.kt entity file to include id, content, created_at, and updated_at fields
4. Create a blogs table using ./alpas make:migration create\_blogs\_table --create=blogs command
5. 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

• Entity Relationship
• Migrations

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

📄 Related Documentation

• Routing

That’s it for part 1 of this series. You can always jump ahead and look at the finished project on GitHub.

In part 2 of this series, we will work on creating a service provider, a markdown to HTML convertor, and a controller.

Read part 2
Read part 3