DEV Community

abdfn
abdfn

Posted on • Edited on

How to build a cool simple contact page with Nuxt and FaunaDB

#nuxt #graphql #fauna #vue

In this article, you'll know how to build a contact website and contact ways...

First, we'll build a simple page and in it how to contact us like Twitter, Dev, Github...

Nuxtjs

Nuxt is an open-source web application framework built on top of Vue.js, It is well known for its SSR capabilities, but it can also do static.

Instead of having a Node server process each client request - eventually fetching data from an API or database in between, we'll be using Nuxt as a static site generator to do the heavy lifting during the build stage.

FaunaDB

Fauna is a globally distributed, low-latency database, with native GraphQL support, that promises to be always consistent and always secure.

As a serverless database, FaunaDB allows applications to access data through a secure API, in contrast to more "traditional" relational databases that require you to open a connection. In that sense, FaunaDB is “connectionless” and rather behaves like an API, which fits perfectly in a Jamstack architecture. There is also no need to host and manage our own database. It requires zero server configuration and supports seamless scalability out-of-the-box.

Demo

you can try the project (demo)

Pre-requisites

before we move on, you'll need :

Let's go

first, you'll need to install create-nuxt-app

$ npm i -g create-nuxt-app
Enter fullscreen mode Exit fullscreen mode

after install let's create our site

$ create-nuxt-app PROJ_NAME && cd PROJ_NAME
Enter fullscreen mode Exit fullscreen mode

Alt Text

now we need three packages :

  • faunadb: JavaScript driver for FaunaDB

  • slugify: we'll use this package to generate slugs from con names

  • dotenv

$ npm i faunadb slugify dotenv
Enter fullscreen mode Exit fullscreen mode

now let's create graphql schema

$ mkdir graphql && cd graphql && touch schema.gql
Enter fullscreen mode Exit fullscreen mode

data modiling (graphql schema)

structure:

  • desc: contact description

  • repoUrl: contact url

  • brand || solid: check if fontawesome icon is fab or fas

  • faI: contact fontawesome icon

  • hashtag: if the contact has a hashtag

  • hashtag_name: hashtag name

inside schema.gql

type Repo {
  desc: String! @unique
  repoUrl: String! @unique

  # if font-awesome icon is brand or solid
  brand: Boolean
  solid: Boolean
  faI: String

  # this only for twitter & dev contacts
  hashtag: Boolean
  hashtag_name: String
}

type Query {
  allRepos: [Repo!]!
}
Enter fullscreen mode Exit fullscreen mode

now go to faunaDB dashboard & create new database

Alt Text

go to graphql section and import your schema

Alt Text

now you should have collections

Alt Text

Creating keys

create Admin key & Server key

ADMIN

Alt Text

Press SAVE

in your project create .env file

Alt Text

replace 🔑️ with your key

SERVER

Alt Text

Also press SAVE

in .env

Alt Text

replace 🗝️ with your second key

ok we finish all this

return to graphql folder and create db-connection.js

$ touch db-connection.js
Enter fullscreen mode Exit fullscreen mode

inside it paste this code

require("dotenv").config();
const faunadb = require("faunadb");
const query = faunadb.query;

function createClient() {
  if (!process.env.FAUNA_ADMIN_KEY) {
    throw new Error("FAUNA_ADMIN_KEY not found");
  }

  const client = new faunadb.Client({
    secret: process.env.FAUNA_ADMIN_KEY
  });

  return client;
}

exports.client = createClient();
exports.query = query;
Enter fullscreen mode Exit fullscreen mode
very important step

in nuxt.config.js in above

require("dotenv").config();
Enter fullscreen mode Exit fullscreen mode

and let's add generate prop

generate: {
    async routes() {
      const faunadb = require("faunadb");
      const query = faunadb.query;
      const slugify = require("slugify");
      const q = query;

      if (!process.env.FAUNA_SERVER_KEY) {
        throw new Error("FAUNA_SERVER_KEY not found.");
      }

      const client = new faunadb.Client({
        secret: process.env.FAUNA_SERVER_KEY
      });

      const result = await client.query(
        q.Map(
          q.Paginate(q.Match(q.Index("allRepos"))),
          q.Lambda("X", q.Get(q.Var("X")))
        )
      );

      const repos = result.data.map(repo => repo.data);
      const routes = repos.map(repo => {
        const repoUrlParts = repo.repoUrl.split("/");
        const repoOwner = repoUrlParts[repoUrlParts.length - 2];
        const repoName = repoUrlParts[repoUrlParts.length - 1];

        const slug = slugify(repoName, {
          remove: /[*+~.()'"!:@]/g
        });

        repo.slug = slug;
        repo.owner = repoOwner;
        repo.name = repoName;

        return {
          payload: repo
        };
      });

      routes.push({
        route: "/",
        payload: repos
      });
      return routes;
    }
  }
Enter fullscreen mode Exit fullscreen mode

Import collections

return to faunaDB dashboard, collections section to create new collection

press new document

example data

{
  "desc": "you can make a github issue",
  "repoUrl": "https://github.com/YOUR_REPO/issues",
  "brand": true,
  "solid": false,
  "faI": "github",
  "hashtag": false
}
Enter fullscreen mode Exit fullscreen mode

I put dev-x Twitter, GitHub issue, Dev org

Alt Text

now go to pages

before beginning, we need some packages

  • font-awesome

  • sass & sass-loader

$ npm i @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons sass sass-loader
Enter fullscreen mode Exit fullscreen mode

now go to nuxt.config.js in css section
we going to import font-awesome style
type this

css: [
  "@fortawesome/fontawesome-svg-core/styles.css",
  ...
],
Enter fullscreen mode Exit fullscreen mode

go to pages and create index.scss

in pages you should have two files

├── index.vue
└── index.scss
Enter fullscreen mode Exit fullscreen mode

in index.vue

template

<template>
  <div class="container">
    <div>
      <Logo />
      <h1 class="title">contact.dev-x</h1>

      <div>
        <div class="card">
          <h3>Contacts &rarr;</h3>

          <ul v-for="repo in repos" :key="repo.desc">
            <li>
              {{ repo.desc }}

              <strong v-if="repo.hashtag">{{ repo.hashtag_name }}</strong>

              <a :href="repo.repoUrl">
                <a class="btn">
                  <fai v-if="repo.brand" :icon="['fab', `${repo.faI}`]" />
                  <fai v-if="repo.solid" :icon="repo.faI" />
                </a>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

script

<script>
import Vue from "vue";

import { library, config } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fab } from "@fortawesome/free-brands-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";

// This is important, we are going to let Nuxt.js worry about the CSS
config.autoAddCss = false;

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fab);
library.add(fas);

// Register the component globally
Vue.component("fai", FontAwesomeIcon);

Vue.config.productionTip = false;

export default {
  asyncData({ payload }) {
    return { repos: payload };
  }
};
</script>
Enter fullscreen mode Exit fullscreen mode

style

<style lang="scss">
@import "index.scss";
</style>
Enter fullscreen mode Exit fullscreen mode

index.scss

$color: #121312;

.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #31465e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}

.card {
  cursor: pointer;
  margin: 1rem;
  flex-basis: 45%;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 2px solid#000000;
  border-radius: 2.5px;
  flex-direction: column;
  box-shadow: 5px 6px 0px black;
}

.card h3 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.card li {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  list-style: none;
  font-family: DF;
}

a {
  color: rgb(0, 119, 255);
}

strong {
  color: dodgerblue;
}

.btn {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid $color;
  color: $color;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.btn:hover {
  color: #fff;
  background-color: $color;
}
Enter fullscreen mode Exit fullscreen mode

Everything is ok

the step before end

in terminal type...

$ npm run generate
Enter fullscreen mode Exit fullscreen mode

if you see this error

Alt Text

don't worry it's a soft error

after generate

we'll use serve to serve the output build

$ npx serve dist

# or

$ sudo npm i -g serve
$ serve dist
Enter fullscreen mode Exit fullscreen mode

go to localhost:5000 and see your result

Deploy to firebase (optional)

install firebase globally

if you've windows

npm i -g firebase firebase-tools
Enter fullscreen mode Exit fullscreen mode

mac or linux

$ sudo npm i -g firebase firebase-tools
Enter fullscreen mode Exit fullscreen mode

now go to firebase console

let's create a web app

Alt Text

and create a new project

Alt Text

hosting

Alt Text

final touches

Alt Text

copy "site" prop

go to the project and type

$ firebase login
Enter fullscreen mode Exit fullscreen mode

it's going to login in browser

initializing

$ firebase init
Enter fullscreen mode Exit fullscreen mode

Alt Text

Alt Text

Alt Text

Alt Text

Alt Text

go to firebase.json

{
  "hosting": {
    "site": "contactus-x",
    "public": "dist",
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

and the final step

$ firebase deploy --only hosting:contactus-x
Enter fullscreen mode Exit fullscreen mode

that it

$ echo happy coding ⌨️
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

waradu profile image

Qopy: My Favorite Clipboard Manager as a Developer

Waradu -

sepiyush profile image

How to Resolve 403 Access Issues When Deploying a SPA on AWS with S3 and CloudFront

se-piyush -

sepiyush profile image

How to Host a Vue.js Application Using S3 and CloudFront

se-piyush -

dharamgfx profile image

Vue.js: Option API vs. Composition API - Which One is Right for You? 🤔

Dharmendra Kumar -