In this multi-part tutorial, we'll create and deploy a multi-server architecture web application using Adonis for the back-end API, Nuxt for the front-end, and PostgreSQL for the database.
Part 1: Creating a front-end using NuxtJS and TailwindCSS
Part 2: Setting up Adonis v5 with PostgreSQL
Part 3: Creating a REST API using Adonis v5
Part 4: Connecting Nuxt front-end to Adonis 5 API
Part 5: Deploying a multi-server app with Cleavr
Frameworks and tools
- Front-end: NuxtJS and TailwindCSS/UI
- Back-end: AdonisJS
- Database: PostgreSQL
- Server provision and deployment: Cleavr
Part 1 - Creating a front-end using NuxtJS and TailwindCSS
Install NuxtJS on your local machine
Installing NuxtJS is very straightforward. You can check out their installation instructions at https://nuxtjs.org/guides/get-started/installation.
For this exercise, let's run the following command in our terminal to install Nuxt.
yarn create nuxt-app themovies
Swap out 'themovies' if you want to name your project something else.
This will take you through a setup wizard that will install all of the dependencies you select. Super helpful and time-saving! The main configs we'll make sure to enable are TailwindCSS for the UI and NodeJS for server.
After installation is complete, cd into the project, cd themovies, and then run yarn dev to run the app on your local.
cd themovies
yarn dev
Make the front-end pretty with TailwindCSS/UI
Open up the project with your favorite editor. I'll be using IntelliJ.
Looking at the folder structure, we can see that there is a layout directory and a pages directory.
In
layouts/default.vue, let's update this page with a nice layout container. If you have a TailwindUI account, I'd recommend using a component from their Application UI section. This is what I'll do for my movie review app.Within the template tags in the
default.vuefile, replace the existing content with content from TailwindUI.Next, I'll just go through and update some of the logos, text, and remove some things we don't need.
The main thing to remember, is we need to designate where the body area is for the layout. In other words, the area that we'll dump content into.
With Nuxt, all you have to do is simply add the <nuxt /> tag to where you want the content to be placed.
Let's now take a look at pages/index.vue. This is the content that will be placed in the <nuxt /> placeholder on the default.vue layout.
I'll grab one of the list components from TailwindUI and replace the existing content between the
<template>tags with it.Now, let's just replace the table row content with Movie info. I'll add-in info from 3 of the best movies ever made - Children of Men, The Terminator, and The Sisterhood of the Traveling Pants.
Add a dynamic movie details page
One of the great things about Nuxt, is you don't need to worry so much about maintaining routes yourself. Nuxt dynamically creates routes for you based on what's in the pages directory - all you need to do is add .vue files.
So, let's go ahead and add a new page for movie details. We'll, of course, want it to be dynamic. To make a dynamic page, just simply add an underscore at the beginning of the file name.
Let's add _title.vue to the pages directory and then add in another TailwindUI component for movie details.
For our movie details, we'll have the following data that we'll take note of for our database table structure:
- Movie title
- Movie poster graphic
- Release year
- Top-billed actors
- Genres
- Description
- Review
One last thing. Let's go back to index.vue and find the <a href> tag for Children of Men. In Nuxt, we use <nuxt-link to=""> instead of <a href> for links. Update the tag to:
<nuxt-link to="/children-of-men" class="...">
Alright! Let's go back to our browser and check our work. (make sure you're still running yarn dev in your terminal)
Voila! It works!
In part 2, we'll install Adonis v5 on our local machine, spin up a PostgreSQL server, and link the two together.
Following along? View Part 1 progress on GitHub at https://github.com/armgitaar/themovies/tree/part-1.
You've probably noticed we mainly just created static content so far. We'll come back and make it dynamic later. Next, we'll work on the back-end API now that we know what data is needed for the front-end.
Top comments (0)