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
- Front-end: NuxtJS and TailwindCSS/UI
- Back-end: AdonisJS
- Database: PostgreSQL
- Server provision and deployment: Cleavr
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
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.
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
I'll grab one of the list components from TailwindUI and replace the existing content between the
<template>tags with it.
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
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.
_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
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.