Deno is asynchronous JavaScript/TypeScript runtime, a super upgrade to Nodejs which is meant to develop server side and client side apps.

In flutter, the result of the job will come in future.

You know that Deno is async by default, in the async world program continue working without interrupting other jobs.

const write = Deno.writeTextFile("./hello.txt", "Hello World!");
write.then(() => console.log("File written to ./hello.txt"));

Here the write constant will return result / only if the operation is succeeded.

To run this script yo may allow deno to use --allow-write permission.

All of my Deno projects will be published on my GitHub Repo, so keep watching.

Prisma is a ORM for JavaScript and Typescript, it let developers easily configure, create / migrate databases using models. One of the cool feature I love mostly is that , it can be configured with  few CLI commands like init, migrate

For initializing the Prisma install the developer dependency  npm i -d prisma and initialize prisma with 

It will generate necessary files under Prisma folder, please open the file and configure database and models. For demonstration I have configured a Sqlite database, you can use other databases like mysql, postgres, Mongodb etc.

//schema.prisma

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Contact{
  id String @id @default(uuid())
  name String
  email String
}
  

Note the id field in the model, it is a primary key and also auto filled by the uuid() function. One you done models go to generate the real database with migrate command

This will generate the tables using the models we defined, to make sure we can use the prisma studio which runs on the port 555, also a standalone studio app is available. 

In the future we can modify and rerun the migrate command for updating the tables, which will drop the tables and re-create for us.

// run in new terminal
npmx prisma studio

In the nextjs app we need the dependency @prisma/client, let's add them to our project

In our React file we can now create prisma object and call the fetch method which will get the data from database. Usually we done the fetching with getStaticProps method in React. 

//index.js

export async function getStaticProps() {
  const contacts = await prisma.contact.findMany();
  return {
    props: {
      initialContacts: contacts,
    },
  };
}

export default function Home({initialContacts}) {
 const [contacts, setcontacts] = useState(initialContacts); 
....

In the similar way, Prisma can use be used in API or graphql end points too.

How to quickly and easily setup Prism ORM with Database in Nextjs

Create and export the client and then we can use the module to make calls to the API.

import {createClient} from 'contentful'

const client=createClient({
    space:'space 🆔 ',
    accessToken:'api-token'
});


export {client}

I tried to directly using the client in app, but it doesn't work for me. So have to create a internal API.

Under pages/api/posts create two route, one for all posts and another for dynamic / individual posts. 

// index.js
import {client} from "../../../contentful";

export default async function  index(req, res) {
    const r = await  client.getEntries();
    return  res.status(200).json(r)
}

import {client} from "../../../contentful";
export default async function  id(req, res) {
    const
    {
        id
    } = req.query;

    const r = await  client.getEntry(id);
    return  res.status(200).json(r)
}

try to access the the API https:// localhost:3000/api/posts

In the Nextjs route / component, as usual we can fetch data in getStaticProps as follows and pass it to the component. The fetching will run  on the top.

import PostGrid from "../Components/PostGrid";
import {GridSkelton} from "../Components/Skeltons";

export async function getStaticProps(context) {
  const res =  await fetch('http:localhost:3000/api/posts')
  const posts =   await res.json() ;
  return {
    props: {
      data:posts ,
    }
  }
}
export default  function Home({data}) {
  return (
      <div >
        {/*{JSON.stringify(data)}*/}
        {data ? <PostGrid  posts={data.items}  />:<GridSkelton/> }
      </div>
  )
}
 

For dynamic route, we have to configure the staticpaths too. This will help static generation.

//pages/posts/[id].js 

import { useRouter } from 'next/router'
import SinglePost from "../../Components/SinglePost";
import {GridSkelton} from "../../Components/Skeltons";

export async function getStaticPaths() {
    const res= await  fetch('http:localhost:3000/api/posts')
    const posts =   await res.json() ;

    const paths = posts.items.map((post) => ({
        params: { id: post.sys.id },
    }))
    return {
        paths,fallback: true // false or 'blocking'
    };
}

export async function getStaticProps({params}) {
    console.log(params)
    const res =  await fetch(`http:localhost:3000/api/posts/${params.id}`)
    const post =  await res.json() ;
    return {
        props: {
            post:post ,
        }
    }
}
const Post = ({post}) => {
    const router = useRouter()
    const { pid } = router.query

    return <>
        { post ? <SinglePost post={post}/>:<GridSkelton/>}
    </>
}

export default Post

selfie.png

How to integrate contentful headless cms in Nextjs

To use a package from GitHub package add the .npmrc file in the root of the project and include the dependency in package.json

This file tell the npm what registries you are using , along side npm registry.

//.npmrc

@OWNER:registry=https://npm.pkg.github.com

Replace the OWNER with organization / user name and add install all the dependencies

How to use Github Package in a react/vue project

In Github every repository can publish packages, which can be used as dependencies in other projects.  

Name of the package should include organization/username and will look like 

Don' forget to publish the repository and add it to the package file as follows

"repository":{
  "url": "git://github.com/org_name/some_repo.git"
}

We have to use the personal access token to authenticate, we can add the secret to the .npmrc file, so that need not authenticate manually.

This file can contain the registry information and authentication secrets, we need not expose this file to repository, so that add the file to the .gitignore

In the .npmrc include the registry information along with organization / owner .

@owner:registry=https://npm.pkg.github.com
npm.pkg.github.com/:_authToken=TOKEN

Replace the owner with user/org and TOKEN with personal token generated.

Let's jump into terminal issue the npm publish command and it will take few minutes to update. The package will list on the repository as well as on user/org profile page.

How to update package ? Can't do that ! instead publish new version by change the version in package.json and publish new one. 

For removing, there is dedicated delete button in relevant package.

How to publish packages on a github repository

We can't publish a package twice to the npm, registry will check the package's version. Literally we can't update existing package, it will remain same. 

Since packages need to be updated, we can use different version for new features, it also a good practice that the older version remain same, since there can be apps developed using those versions.

To publish a new version of the existing package, change the version key in the package.json (at the root of the project) and go on publish 

npm adduser (optional)
npm publish 
or
npm publish --access=public

Using the pages/api route we can add graphql end point in Nextjs. In order to achieve this we have to use *apollo-server-micro, express*. The API route will consume the server less function feature.

In most case, the methods that create the graphql server end up with errors. I have been tested those methods suggested by many youtubers, which end up with error, such as server can't access/located . I tried the cors , and it didn't make it.

//grphql.js
import { gql, ApolloServer } from "apollo-server-micro";
import { PrismaClient } from "@prisma/client";
import {
  ApolloServerPluginLandingPageGraphQLPlayground,
  ApolloServerPluginLandingPageDisabled,
} from "apollo-server-core";
const prisma = new PrismaClient(); 
 
 
const typeDefs = gql`
  type Contact {
    id: String
    name: String
    email: String
  }

  type Query {
    contacts: [Contact]
  }
`;

const resolvers = {
  Query: {
    contacts(_parent, _args, _context) {
      return prisma.contact.findMany();
    },
  },
};

let apolloServerHandler =(req, res) => Promise
async function startServer(req, res) {
   const server =   new ApolloServer({
    typeDefs,
    resolvers,
    plugins: [
      ApolloServerPluginLandingPageGraphQLPlayground({
        // options
      }),
    ],
  }) ;
  await server.start();
  apolloServerHandler=   server.createHandler({path:'/api/graphql'}); 
  return apolloServerHandler;
}

export default async (req,res)=>{
    const apolloServerHandler = await startServer();
    return apolloServerHandler(req,res)
}
 
export const config = { api: { bodyParser: false } };

I also utilized the Prisma ORM for fetching real time data, if you wanna know, how to Prisma, check out the Next Prisma Guide.

How to setup a graphql API end point in Nextjs using Apollo Server Micro

Graphql is modern an alternative approach for the REST API invented by Facebook. It is used for fetch data from a server and put data back to a server , just like the regular API does. 

The Graphql shines where you want to fetch few data (required), where REST API fetch a bunch of data, it may cause fetching too much data. API have multiple end points where graphql have one. One of the problem with graphql, it is not simple to create a graphql server, even though once it has been done ,using them is quiet simple. 

With Apollo server we can build and run a graphql server, for creating route for our graphql end point can utilize the node developers favorite express module

For initializing the Prisma install the developer dependency  npm i -d prisma and initialize Prisma with 

This will generate the tables using the models we defined, to make sure we can use the Prisma studio which runs on the port 555, also a standalone studio app is available. 

In the Nuxtjs app we need the dependency @prisma/client, let's add them to our project

In the Nuxt app , we can setup internal API for interacting with database using server middleware.In the project folder create a folder api and inside the folder create a file graphql.ts

For create and run server routes, we can use the express framework the API should export the handler as in Nextjs.

typedefs constant contains graphql type definitions, Query and Mutations, it can be a user defined objects with multiple keys. For a complete data type list refer the official documentation.

As the name suggest the query is used to fetch some data, it uses the array syntax to fetch data.

Mutations are for defining graphql part of create, update, delete functions.

So the first part of our graphql is done with type, query and Mutations. But this is not enough, these are structures, we have to make them working, with resolver function. Resolvers are function to make the Query and Mutation in motion. 

The API would not work at this point, it also required setup a middleware in the dedicated Nuxt-config and for data fetching need to use PrismaClient object too. Let's  update config first

 export default {
   // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
   ssr: false,
   serverMiddleware:[
     '~/api/graphql.ts',
   ] ,  
     .....

and now the graphql playground  can be accessed at http://localhost:3000/api/graphql

 Here is CodesandBox version of the Project

Setup a graphql API (serverMiddleware) in Nuxt with Apollo + Express + Prisma ORM 

Graphql API in Nuxt using serverMiddleware

When it come to chart I should mention Morris chart which I start developing my very first Python Flask app. It offer pretty nice charts. But for Vue I recommend you to use Chartjs.

Chartjs has Vue wrapper variant (opensource) which is based on Original Chartjs. It is JavaScript library you can use either CDN or NPM version. I going to use it with NPM, it is so easy.

Here is a simple TypeScript example ( provided by the official GitHub repository)

// CommitChart.ts
import { Component, Mixins } from 'vue-property-decorator'
import { Bar, mixins } from 'vue-chartjs';
import { Component } from 'vue-property-decorator';

@Component({
    extends: Bar, // this is important to add the functionality to your component
    mixins: \[mixins.reactiveProp\]
})
export default class CommitChart extends Mixins(mixins.reactiveProp, Bar) {
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: \['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'\],
      datasets: \[
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: \[40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11\]
        }
      \]
    })
  }
}

lol, create custom component for charting , so that you can use them in other projects.

One of the key point to remember that the chart component class doesn't have a CSS and Template section. According to documentation it can't have template section. So you have to use another component using the above component.

Popular chart libraries for Vuejs applications

In our base app tutorial we have seen how to create default page for our app. It is not a route, it's middle-ware. In this example we create some basic routes using oak Router and add it as middle ware using the use method.

We can create Oak router for our app in the same file. But as the application develop, the code become large, so in order to make it simple and easy to handle we keep routes in separate file and later include them as middle-ware to the main application.

In a folder called routes create a file route.ts

import { Router } from "https://deno.land/x/oak/mod.ts";

const router = new Router()

router.get('/', (ctx) => {
  ctx.response.body = 'Home Page'
  ctx.response.status = 200

})

router.get('/about', (ctx) => {
  ctx.response.body = 'About Page'
  ctx.response.status = 200

})

router.get('/products', (ctx) => {
  ctx.response.body = 'Products Page'
  ctx.response.status = 200

})

export default router;

In the first line we import the Router from the Oak module, which is used to create our basic site routes. Then we export the router and will call the routers in the main.ts as follows.

Here '/' route is the default page / index page of our app.

//main.ts
import { Application } from "https://deno.land/x/oak/mod.ts";
import router from './routes/route.ts'
const app = new Application();

app.use(router.routes())
app.use((ctx) => {
    ctx.response.body = "Not found";
});

app.listen({ port: 8000 });
console.log('Server running on port 8000')

In the main.ts we added the route as middle ware, lets run the app with net permission.

Now jump into the browser access your route http://127.0.0.1/.

NPM is Node based JavaScript package registry. Thousands of packages and libraries are being added to npm daily. To publish a package to npmjs we should have

The name of the package, is the first thing to not in package file. Of course  there are millions of already used packages, so the name may not be available, prefer another, make a search on the npmjs. Alternatively we can use scope in name. For example 

  This will create private package, we can make it public when publishing it. Here the mongo is the npmjs username, and it should be.

Readme help developers to give some usage sample and basic information. If you don't know the standards, please install VSCode extension for generating README.

{

  "name": "@meo/package_name",

  "version": "1.0.0",

  "description": "Awesome description",

  "author": "Mumi",

  "license": "MIT",

  "keywords": ["color-picker","color","CSS","vuejs","vue-components"],

  "repository": {

  "url": "git://github.com/mue/vue-sfc.git"

   },

    ....

}

Make sure , build the project properly. Go to terminal  (cd into the project) and login to npm using credentials.

If you are using scoped name (@username/pkg) use the following command to make the package available to all

and it will be added to your package list on npmjs.

Vue 3is a progressive framework for web development, this opensource project is a power tool in web developer kit. It’s fast, lightweight and easy to learn. Version 3 has many performance upgrade fromVue 2.

For consuming API in Vue I have two option go with Fetch or use axios. Usingaxiosin Vue3 script setup is similar to Vue2 , but you may mess up withthisandvalue.

In the composition API setup , we can setup Axios on mounted life cycle hook as follows and use.valueto assign the value to reactive property.

const {  onMounted, ref} = require("vue");
 const axios = require("axios");
 export default {
 
   setup( ) {
    const info=ref([])
    onMounted(async () => {
      await axios
          .get('https://jsonplaceholder.typicode.com/posts')
          .then(response => {
            info.value = response.data
 
          })
      console.log(info)
    })
     return {
      info
     }
   }
 }

Script setup simplify the component creation, following posts may help you explore more

What should Element Plus + Nuxt3 + SASS pacakge.json look like

Computed property in Vue3 Composition API setup

Prismic is a Headless CMS which is a cloud based service and allow non developers easily manage content of the websites and apps and for developers it is easy to build the UI with editable content. For more information about awesome Prismic features visit Prismic.io

Prismic slices are optional components such as paragraph, images etc. It is more like block in WordPress block editor, there are more chocolates inside, lol

By default the UI of your app may not render slice automatically. We are discussing a Nuxt project that render slices. Our Task is to render the slices in the index page  

Install the necessary dependencies require for the working of slices. 

vue-sllicezone library will help us to render the necessary slices for us . For rendering we need a slice components. To specify the location of our Slices we need file called sm.json in the root with following content 

//sm.json
{"libraries": ["@/slices", "vue-essential-slices"]}


The vue-slicezone component will look for the slices folder for matching the snake_cased slices against PascalCased component . You can name the slices folder as you wish and must include in the libraries array of sm.json

Suppose you have a simple text_slice component in prismic. Create a TextSlice.vue with following code.

//slices/TextSlice.vue
<template>
  <div>
     <prismic-rich-text :field="slice.primary.ritch_text_field" />
  </div>
</template>

<script>
export default {
name:'TextSlice',
  props: {
    slice: Object,
  },
};
</script>

//slices/index.js
import
TextSlice from './TextSlice.vue'

export {
  TextSlice,
  }

Before beginning make sure that all slices in the current document (prismic.io) have PascalCased slices, otherwise it will end with an error.

A document that is already fetched using $prismic object which contain the slices object array, usually stored in a body object.

The slice-zone component can be added using the import statement and can include in the template section as follows.

<template>
....
<slice-zone class="subtitle" 
:slices="page.data.body" 
:resolver="resolver" />

</template>

import SliceZone from "vue-slicezone";
...
components: {
    SliceZone,
  },

Since we are using Vue component , we need to setup component manually. The resolver method will instruct slice-zone which component to render. This also help us to specify only a few components  to render by passing as an array. 

In our case we have only one component, so need not go through the array option. Just import them all

.....
import * as Slices from "@/slices";
....
methods: {
    resolver({ sliceName, slice, i }) {
      return Slices[sliceName];
    },
  },

And that's all. Have a question ? leave it in comment. 

While I have the entire blogging platform done in Nuxt and Prismic and have a look @ GitHub