The previous blog post covers the implementation of the backend for the showcase using Ory and Supabase. Here's an overview of the backend architecture we built in the previous post including Ory Kratos, Supabase, and Ory Oathkeeper:
This article will show you an example of building a front-end for our URL shortener to complete the project. Here's the end result:
You can find the full backend and frontend source code for this project on GitHub.
Let's start hacking!
What we will use
- Nuxt is an open source framework built on Vue.js. Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.
- TailwindCSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
- Axios In a nutshell, Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise API.
I chose these products to build a frontend because of their simplicity. It's easier to build frontend apps today because React, Next, Vue and Nuxt frameworks exist with built-in es6 feature compatibility in the browser. I started building JS apps in 2013 and quit in 2015 because I had a bad experience with ES5 and backbone. I needed to write a lot of boilerplate code to add new CRUD views for any new datatype for my backbone application. Nowadays it became easier with project generators and useful frameworks. You can concentrate on writing code without useless actions like copying and pasting boilerplate code.
We will use the following parts of the NuxtJS framework:
Creating layout for our application
We will use the default layout created by
create-nuxt-app. The code of
layouts/default.vue is simple. I took the basic example of the URl shortener
frontend from
jonathanjameswilliams26 URL Shortener
project.
mkdir client
cd client
npx create-nuxt-appUse the following settings to create the starter application:
We need to have a simple layout with an application header with Sign-in/Sign-up
buttons for unauthenticated user. Let's create the AppHeader component and add
it to our layout. Create components/AppHeader.vue file with the following
content
Tke a closer look at two important parts of our AppHeader:
- Usage of
computedproperties that uses thestorefeature of Nuxt. In this case, we use the Nuxt.js store features, and create them later. - Usage of the
$configvariable that is part of the runtime configuration
Let's create a store for sessions for our application:
Also, Nuxt uses
publicRuntimeConfig
object for application configuration using environment variables, hence we need
to add these lines to our nuxt.config.js
Let's make an URLInput that only lets authenticated users create shortened
URls. Create a components/URLInput.vue file with the following content:
Building everything together
We do not call Kratos APIs yet, and we need to make two API calls:
- toSession to check if the user session is valid
- Create a Logout URL for Browsers
Let's create a pages/index.vue file with the following content
asyncData is a hook for
universal data fetching in
Nuxt.js. Unlike fetch, which requires you to set properties on the component
instance (or dispatch Vuex actions)
to save your async state. Nuxt waits for the asyncData hook to be finished
before navigating to the next page or display the error page.
We commit the fetched data to our store and make it available for all our components once we get the result of async API calls.
Displaying shortened URLs component
Let's create a components/URLView.vue with the following content:
Run npm run dev to run the example locally.
You can find the full backend and frontend source code for this project on the Ory example repository.
Next steps
- Move Kratos API calls to middleware/plugins directory. That would be the best place for this code.
- Add more pages with analytical information (for example Views,Top Referrals, or Highcharts.js graphs).
- Go to production with free tiers of the following services:
- Ory Network
- Supabase
- Vercel or Netlify for frontend