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
- 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.
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
jonathanjameswilliams26 URL Shortener
mkdir client cd client npx create-nuxt-app
Use 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
Tke a closer look at two important parts of our AppHeader:
- Usage of
computedproperties that uses the
storefeature 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
object for application configuration using environment variables, hence we need
to add these lines to our
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:
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.
- 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
- Vercel or Netlify for frontend