Vuetify 3 TypeScript Tutorial Series -Part 1
In this tutorial series, we are going to create the Frontend for a task web app. We will utilize the complimentary service of render.com to effortlessly deploy a free API project called backend4frontend. It will serve us to implement GET, POST, PATCH and DELETE endpoints. We’ll construct this app using the Vue 3 based component library Vuetify 3 with TypeScript, with Vite as build tool, Vitest for writing Unit Tests, Pinia to cache data, Axios as HTTP client, ESLint for static analysis and Docker to containerize our web app and deploy it then on an Ubuntu instance.
Prerequisite
- Fundamental knowledge of Vue and TypeScript (at least watched one Vue 3 tutorial on YouTube)
- A GitHub account
- An IDE or Editor
- Postman or Insomnia or any other HTTP client tool to test endpoints
- Installed version on NodeJS and npm on your system
- Docker Desktop installed and an account on Docker Hub
Who should NOT read this tutorial series?
People who are looking for a Nuxt 3 tutorial.
What the result will look like on Desktop & Mobile:
Overview of the endpoints for the task web app
Infrastructure set up
For seamless integration of CRUD operations with our Vue 3 web application, I have selected render.com as our service platform. Render is a comprehensive cloud service that streamlines the development process by offering a range of features like free TLS certificates, a global content delivery network (CDN), private networking, and automatic deployments directly from Git. This simplifies our deployment process significantly — we can directly link our GitHub repository to have a fully functional web service up and running in no time. The hassle of setting up a Linux server, securing a domain for HTTP operations, and other backend concerns are efficiently handled by render.com, allowing us to focus more on development and less on infrastructure management.
Deploy API on render.com — Yalla | يلا | let’s start
I invite you to visit my GitHub repository at [https://github.com/habibicoding/backend4frontend](https://github.com/habibicoding/backend4frontend) and create a fork. This repository will act as the backend for our upcoming web application project. After forking the repository, the next step involves deploying the application. To do this, please set up an account on Render at [https://dashboard.render.com/](https://dashboard.render.com/) and link it to your GitHub, GitLab, or BitBucket account. Once your account is established and connected to your code repository, you can begin the deployment process by selecting the “New Web Service” option. This step is essential for getting your web application up and running.
Select “Build and deploy from a Git repository” and click Next.
Search for “backend4frontend” and click Connect.
Give your project a name you like, I will just name it “backend4frontend” and choose your Region and make sure you select the Free instance type.
Then click on Create Web Service
Next, grab tea or coffee because the deployment will take a few minutes
After a few minutes, the status should change from “Building” to “Live”.
But our API will not work yet, because we need to add environment variables for the database configuration. Go to https://supabase.com/ and sign up there to get a Postgres instance. After successfully signing up and signing in click on New Project.
Give your project a name and remember the password, then click on Create new project
Creating a new project can also take a few minutes, so be patient.
After it is finished go to Settings by clicking on the gear icon and go to Database
Then you should see on the right side all the values you need for the environment variables for the backend. Then click on JDBC and copy somewhere the value BUT you will need only the following part:
jdbc:postgresql://{host}:5432/postgresso REMOVE “?user=postgres&password=[YOUR-PASSWORD]”
Here you can see all the environment variables we need: https://github.com/habibicoding/backend4frontend/blob/main/src/main/resources/application.yml
The environment variables keys are:
SERVER_PORT
DATASOURCE_USERNAME
DATASOURCE_PASSWORD
DATASOURCE_URL
DATASOURCE_DRIVER_CLASS_NAME
JPA_DATABASEAfter that hop back to render.com and click on Environment and add the keys plus the values from supabase.com after that click on Save Changes.
For the record, you should have the same values for SERVER_PORT, DATASOURCE_USERNAME, DATASOURCE_DRIVER_CLASS_NAME and JPA_DATABASE like me:
SERVER_PORT = 9090
DATASOURCE_USERNAME = postgres
DATASOURCE_DRIVER_CLASS_NAME = org.postgresql.Driver
JPA_DATABASE = postgresqlNext, this should trigger a new deployment so click on Events and look at the most recent event.
Then after a few minutes, you should hopefully see a successful deployment.
OK, now enter in your web browser:
https://{your-project-name}.onrender.com/api/v1/tasksYou should see an empty array response:
Then try to open Swagger UI:
https://{your-project-name}.onrender.com/api/swagger-ui/index.htmlThis is what you should see:
Now open Postman or Insomnia to quickly test the API to database connection. We tested with /tasks call a GET endpoint with our browser.
https://{your-project-name}.onrender.com/api/v1/tasksNow, let us see if the POST endpoint also works by entering first the URL the same URL in Postman or Insomnia:
https://{your-project-name}.onrender.com/api/v1/tasksIn the body, we add a JSON object:
{
"description": "Start Vuetify 3 tutorial",
"isReminderSet": false,
"isTaskOpen": true,
"createdOn": "2023–01–04T17:53:53.045334",
"priority": "LOW"
}
Now, we can view in the web browser if the task was added to the array:
If you want you can also test in Postman the other endpoints, but you don’t have to because we will test them anyway with our Vuetify implementation.
With that, we conclude the first part of this tutorial series. If you found it useful and informative, give it a clap. Here is Part 2
Don’t forget to check out the video playlist on YouTube.
Here is the source code on GitHub, check out the branch: part-one
