DEV Community: Bishal Neupane

How does the internet work? Simplified

Bishal Neupane — Mon, 10 Oct 2022 05:03:21 +0000

Note: In an attempt to simplify the workings of the internet. I've not included the technical jargon and avoided many parts of the internet.

So, What is the Internet anyways?

If you’re imagining cloud stuff then please don’t that's the most incorrect picture of the internet. Internet is basically just wires which might be copper wire, fiber optics, or a cell phone network.

Computers connected to this wire can communicate with each other thus allowing people to share resources, information, etc.

There are dedicated computers known as servers that are directly connected to the internet and store webpages, images, videos, etc. These servers have unique IP addresses. These IP addresses are like home addresses as you can use them to reach the server e.g 142.250.196.78. These numbers are difficult to remember so we’ve names basically these names are mapped into the IP address like.

google.com → 142.250.196.78. We’ll talk about this conversion in another blog.

A youtube video journey story to discuss How the internet works?

Have you ever imagined or wondered how the youtube videos you would like to watch land on your computer so seamlessly? Here let's dig into the networking side of things.

This is a simplified illustration of what happens when you request a video on youtube.

First step: It goes through your router at your home.

Second step: Your router forwards that request to your ISP (Internet Service Provider).

Third step: From here your ISP may route your request anywhere around the world mostly to another ISP from where it has bought the bandwidth. So your request to youtube is now going to hop to multiple routers before it reaches its destination i.e YouTubes server.

you can use a program called traceroute to see how your request gets to youtube servers and how many hops it makes to reach youtube.

traceroute youtube.com

Fourth Step: The youtube server gets your request and sends back the video you requested the video file travels to your computer using the IP address. Remember while sending a request you give both the destination and source IP address here the source being your computer.

All the data on the internet are transferred as packets. First, the video file is divided into packets and then sent across the internet, and when it lands on your computer. The data is reassembled this magic is done by the protocols. About which we’ll discuss in another blog post.

This was a simplified version of how the internet works.
If you want to dive deeper into the technical details of how the internet really works then:
https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work

Deploying strapi project on heroku

Bishal Neupane — Sun, 28 Nov 2021 10:15:10 +0000

This is the eight blog post on the series of blog post I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

In this blog post we're going to deploy our strapi project on heroku. So if you don't have heroku account then go ahead and create also don't forget to install the heroku cli.

heroku version

//output --> heroku/7.59.1 linux-x64 node-v12.21.0

Go ahead and login

heroku login

Now let's create a heroku app for that name of your app must be unique

heroku create nameofyourapp

Within your strapi project

heroku git:remote -a nameofyourapp

Let's setup postgres db

heroku addons:create heroku-postgresql:hobby-dev

Now we need to set database variable so that stapi can connect to our database for that

yarn add pg-connection-string
or
npm i pg-connection-string

We also need seprate database config for database so,
Inside Path: ./config/env/production/database.js add this

const parse = require('pg-connection-string').parse;
const config = parse(process.env.DATABASE_URL);

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'postgres',
        host: config.host,
        port: config.port,
        database: config.database,
        username: config.user,
        password: config.password,
        ssl: {
          rejectUnauthorized: false,
        },
      },
      options: {
        ssl: true,
      },
    },
  },
});

This sets the node enviroment variable to production

heroku config:set NODE_ENV=production

Add ./config/env/production/server.js

module.exports = ({ env }) => ({
  url: env('MY_HEROKU_URL'),
});

heroku config:set MY_HEROKU_URL=$(heroku info -s | grep web_url | cut -d= -f2)

yarn add pg
or
npm i pg

git add .
git commit -m "Update database config"

git push heroku master

And that is it about Deploying strapi project on heroku. In another blog post, we'll deploy nextjs to vercel. If you have any problem with this code and then let me know in the discussion.

Rendering mdx content using react-markdown

Bishal Neupane — Sun, 28 Nov 2021 09:41:53 +0000

This is the seventh blog post on the series of blog post I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

In this blog post we're going to create the blog page that renders the mdx content
We're going to make use of react-markdown and remark-gfm to render mdx content well

yarn add react-markdown remark-gfm
or
npm i react-markdown remark-gfm

Now let's create a folder blog inside the pages directory and within blog folder create file with [slug].tsx name. So that we can fetch blog using getStaticProps.

import { gql } from 'graphql-request';

export const blogPathsQuery = gql`
  query BlogPaths {
    posts {
      slug
    }
  }
`;

export const blogPageQuery = gql`
  query Blog($slug: String!) {
    posts(where: { slug: $slug }) {
      title
      slug
      description
      updated_at
      topics
      author {
        name
        bio
        avatar {
          formats
        }
      }
      playlist {
        posts {
          updated_at
          title
          slug
          description
          topics
        }
      }
    }
  }
`;

Now inside the [slug].tsx add this

import request from 'graphql-request';
import { DateTime } from 'luxon';
import { GetStaticProps } from 'next';
import NextImage from 'next/image';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

import { BlogPathsQuery, BlogQuery } from '../../gql/graphql';
import { blogPageQuery, blogPathsQuery } from '../../queries/blog';
import { timetoRead } from '../../util/calculateTimeToRead';
import { GobackButton } from '../playlists';
import { Link } from '../../components/Link';
import { BlogCard } from '../../components/BlogCard';

export async function getStaticPaths() {
  const paths: BlogPathsQuery = await request(
    'http://localhost:1337/graphql',
    blogPathsQuery
  );
  const pathFormat: any = [];
  paths.posts?.forEach((path) =>
    pathFormat.push({ params: { slug: path?.slug } })
  );
  return {
    paths: pathFormat,
    fallback: false,
  };
}

export const getStaticProps: GetStaticProps = async (context) => {
  const posts: BlogQuery = await request(
    'http://localhost:1337/graphql',
    blogPageQuery,
    {
      slug: context?.params?.slug,
    }
  );
  return {
    props: posts,
  };
};

function Playlist({ posts }: BlogQuery) {
  const post = posts![0];
  const formattedDate = DateTime.fromISO(post?.updated_at).toFormat('DD');
  const approxReadingTime = timetoRead(post?.description!);

  return (
    <div className='container mx-auto sm:p-5'>
      <div className='border-2 border-gray-500'>
        <GobackButton />
        <div className='flex'>
          <NextImage
            src={post?.author?.avatar?.formats.thumbnail.url}
            height={post?.author?.avatar?.formats.thumbnail.height}
            width={post?.author?.avatar?.formats.thumbnail.width}
            className='rounded-full'
          />
          <div>
            <p className='capitalize text-2xl text-gray-800'>
              {post?.author?.name}
            </p>
            <p className='text-gray-500'>{post?.author?.bio}</p>
          </div>
        </div>
        {/* blogsection */}
        <section className='px-5'>
          <div>
            <h1 className='my-2 text-3xl md:text-5xl text-gray-800'>
              {post?.title}
            </h1>
            <p className='text-sm text-gray-400'>
              Last Updated {formattedDate}
            </p>
            <p className='text-sm text-gray-500'>
              ~{approxReadingTime}{' '}
              {approxReadingTime > 1 ? 'minutes' : 'minute'} read
            </p>
            <div className='relative h-full'></div>
            <ReactMarkdown
              components={{
                a: ({ node, ...props }) => {
                  console.log(props);
                  return (
                    <Link
                      {...props}
                      href={props.href!}
                      className='text-green-500'
                    />
                  );
                },
              }}
              remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
            >
              {post?.description!}
            </ReactMarkdown>
          </div>
        </section>
      </div>
      <div className='border-2 border-gray-400 p-2 my-5'>
        <h4 className='text-2xl text-gray-600 my-3'>Some related posts</h4>
        <div className='space-y-4 md:space-y-0 md:grid gap-4 md:grid-cols-2'>
          {post?.playlist?.posts?.map((post) => {
            if (posts![0]?.title === post?.title) return;
            return (
              <BlogCard
                title={post?.title!}
                description={post?.description!}
                slug={post?.slug!}
                topics={post?.topics!}
                updated_at={post?.updated_at!}
                key={post?.slug}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default Playlist;

And that is it about Rendering mdx content using react-markdown. In another blog post, we'll deploy strapi to heroku and nextjs to vercel. If you have any problem with this code and then let me know in the discussion.

Using getStaticProps and getStaticPaths for static site generation (ssg) in nextjs

Bishal Neupane — Fri, 19 Nov 2021 11:03:13 +0000

This is the sixth blog post on the series of blog post I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

If you've not gone through the previous blog posts then make sure to check them out

In this blog post, we're going to build two pages in our blog/portfolio site

Playlists - This will show all the playlists along with recent three blogs
Playlist - This will show all the posts on a particular playlist. We'll use dynamic SSG for this page

Playlists page

So let's first build the playlists page for that let's write the query which will fetch the required data

import { gql } from 'graphql-request';

export const playlistsQuery = gql`
  query Playlists {
    playlists {
      title
      description
      id
      slug
      posts(sort: "updated_at:desc", limit: 3) {
        updated_at
        title
        slug
        description
        topics
      }
    }
  }
`;

Create a file playlists.tsx inside the pages and add the following code

import { request } from 'graphql-request';
import { useRouter } from 'next/dist/client/router';
import React from 'react';
import Link from 'next/link';

import { BlogCard } from '../components/BlogCard';
import { PlaylistsQuery } from '../gql/graphql';
import { playlistsQuery } from '../queries/playlists';

export const getStaticProps = async () => {
  const data: PlaylistsQuery = await request(
    'http://localhost:1337/graphql',
    playlistsQuery
  );

  return { props: data };
};

function playlists({ playlists }: PlaylistsQuery) {
  return (
    <div className='p-2 container sm:mx-auto'>
      <GobackButton />
      <main>
        <div className='space-y-2'>
          <h1 className='text-4xl'>Welcome to Blog playlist</h1>
          <h4 className='text-md text-gray-500'>
            A playlist is series of blogpost where I write about particular tool
            or subject
          </h4>
        </div>

        <div className='my-10'>
          {playlists?.map((playlist) => (
            <div className='my-10' key={playlist?.id}>
              <Link href={`/playlist/${playlist?.slug}`} passHref>
                <h3 className='hover:underline cursor-pointer text-3xl capitalize'>
                  {playlist?.title}
                </h3>
              </Link>
              <div className='md:grid md:grid-cols-2 md:gap-3 xl:grid-cols-3'>
                {playlist?.posts?.map((post) => (
                  <div key={post?.slug} className='my-2 mx-2 h-full'>
                    <BlogCard
                      slug={post?.slug!}
                      title={post?.title!}
                      description={post?.description!}
                      topics={post?.topics!}
                      updated_at={post?.updated_at!}
                    />
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}

export const GobackButton = () => {
  const router = useRouter();
  return (
    <button
      onClick={() => router.back()}
      className='text-green-500 hover:bg-gray-200 rounded-md p-2'
    >
      &larr; go back
    </button>
  );
};

export default playlists;

Playlist page

We'll require two different queries first one to just get the slugs for different playlist page and the second one for the actual data.

import { gql } from 'graphql-request';

export const playlistPathsQuery = gql`
  query PlaylistPaths {
    playlists {
      slug
    }
  }
`;

export const playlistQuery = gql`
  query Playlist($slug: String!) {
    playlists(where: { slug: $slug }) {
      title
      description
      slug
      posts(sort: "updated_at:desc") {
        id
        updated_at
        title
        slug
        description
        topics
      }
    }
  }
`;

We'll use the first query to dynamically build the pages and the second one for the actual data that we need
So go ahead and create a folder inside the pages directory and name it playlist and inside the folder create [slug].tsx file

//[slug].tsx file

import request from 'graphql-request';
import { GetStaticProps } from 'next';
import { BlogCard } from '../../components/BlogCard';

import {
  PlaylistPathsQuery,
  PlaylistQuery,
  PlaylistsQuery,
} from '../../gql/graphql';
import { playlistPathsQuery, playlistQuery } from '../../queries/playlist';
import { GobackButton } from '../playlists';

export async function getStaticPaths() {
  const paths: PlaylistPathsQuery = await request(
    'http://localhost:1337/graphql',
    playlistPathsQuery
  );
  const pathFormat: any = [];
  paths.playlists?.forEach((path) =>
    pathFormat.push({ params: { slug: path?.slug } })
  );
  return {
    paths: pathFormat,
    fallback: false,
  };
}

export const getStaticProps: GetStaticProps = async (context) => {
  const posts: PlaylistQuery = await request(
    'http://localhost:1337/graphql',
    playlistQuery,
    {
      slug: context?.params?.slug,
    }
  );
  return {
    props: posts,
  };
};

function Playlist({ playlists }: PlaylistsQuery) {
  console.log(playlists);
  const playlist = playlists![0];
  return (
    <div className='p-2'>
      <GobackButton />
      <div className='space-y-2'>
        <h1 className='text-4xl capitalize'>{playlist?.title}</h1>
        <h3 className='text-gray-500'>{playlist?.description}</h3>
      </div>
      <div className='space-y-2 md:grid md:grid-cols-2 md:gap-4 md:items-center xl:grid-cols-3'>
        {playlist?.posts?.map((post) => (
          <BlogCard
            key={post?.slug!}
            title={post?.title!}
            description={post?.description!}
            updated_at={post?.updated_at!}
            topics={post?.topics!}
            slug={post?.slug!}
          />
        ))}
      </div>
    </div>
  );
}

export default Playlist;

And that is it about Using getStaticProps and getStaticPaths for static site generation (SSG) in nextjs. In another blog post, we'll create the actual blog page. If you have any problem with this code and then let me know in the discussion.

Building the landing page for my portfolio/blog website

Bishal Neupane — Fri, 19 Nov 2021 10:33:34 +0000

This is the fifth blog post on the series of blog post I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

If you've not gone through the previous blog posts then make sure to check them out

In this blog post, we're going to create the landing page using nextjs and tailwindcss so let's write the graphql query to fetch all the required data

import { gql } from 'graphql-request';

export const homePageQuery = gql`
  query HomePage {
    homepage {
      creditText
      Hero {
        title
        navlinks
        profile {
          url
          height
          width
        }
      }
      About {
        work
        blogs
        watch
        email
      }
      Project {
        title
        description
        tools
        image {
          url
          height
          width
        }
        url
        bg {
          url
        }
      }
      Contact {
        email
        insta
        linkedin
        twitter
        youtube
        title
      }
    }
    posts(sort: "updated_at:desc", limit: 3) {
      updated_at
      title
      slug
      description
      topics
    }
  }
`;

Now let's generate the type information using graphql codegen use
If you've not gone through the generating type info blog post then you can check that out here Type gen blog post

yarn gen
or npm run gen

It's time to use the nextjs's getStaticProps function which will allow us to make the graphql request on the server during the build process. We can use the getStaticProps like so;

export const getStaticProps = async () => {
  const data: HomePageQuery = await request(
    'http://localhost:1337/graphql',
    homePageQuery
  );

  return { props: data };
};

Here the request comes from the graphql-request package and HomePageQuery is the type that was generated by graphql-codegen. This will fetch the data and pass it to the page as a prop.

import { request } from 'graphql-request';
import { homePageQuery } from '../queries/homepage';
import { HomePageQuery, Post } from '../gql/graphql';
import React from 'react';
import NextImage from 'next/image';
import { Link } from '../components/Link';
import { Button } from '../components/Button';
import { BlogCard } from '../components/BlogCard';
import {
  AiFillInstagram,
  AiFillYoutube,
  AiOutlineTwitter,
} from 'react-icons/ai';
import { GrMail } from 'react-icons/gr';

export const getStaticProps = async () => {
  const data: HomePageQuery = await request(
    'http://localhost:1337/graphql',
    homePageQuery
  );

  return { props: data };
};

const Home = ({ homepage, posts }: HomePageQuery) => {
  return (
    <div>
      <div className='container sm:mx-auto'>
        <main>
          <section id='hero'>
            <div className='rounded-md mt-5 bg-hero'>
              {/* navLinks */}
              <div className='flex space-x-4 justify-end p-4 mx-4'>
                {homepage?.Hero?.navlinks?.split(',').map((nav) => (
                  <Link href={nav == 'blog' ? '/playlists' : '#'} key={nav}>
                    {nav}
                  </Link>
                ))}
              </div>

              {/* titleandprofile */}
              <div className='flex flex-col sm:flex-row mt-10 justify-between'>
                <h1
                  style={{ lineHeight: '1.3' }}
                  className='text-gray-800 xl:ml-32
             text-opacity-95 text-3xl md:text-5xl lg:text-6xl mx-4 max-w-lg'
                >
                  {homepage?.Hero?.title}
                </h1>
                <NextImage
                  src={homepage?.Hero?.profile?.url!}
                  alt='myprofile'
                  height={`${homepage?.Hero?.profile?.height!}`}
                  width={homepage?.Hero?.profile?.width!}
                />
              </div>
            </div>
          </section>
        </main>
        {/* worksection */}
        <section id='work'>
          <div
            className='bg-indigo-300 my-10 rounded-lg
         grid sm:grid-rows-2 sm:grid-cols-2 p-4 gap-2 xl:pl-32'
          >
            <div className='space-y-1 my-4'>
              <h1 className='text-5xl'>Work.</h1>
              <p className='ml-2 max-w-md text-gray-600'>
                {homepage?.About?.work}
              </p>
            </div>
            <div className='space-y-1'>
              <h1 className='text-5xl'>Blogs.</h1>
              <p className='max-w-md text-gray-600'>{homepage?.About?.blogs}</p>
            </div>
            <div className='space-y-1'>
              {/* <h1 className='text-5xl'>Work.</h1> */}
              <div className='h-10'></div>
              <div className='ml-2 max-w-md text-gray-600'>
                <Link
                  className='inline-block text-blue-600'
                  href={`mailto:${homepage?.Contact?.email}`}
                >
                  Email me
                </Link>{' '}
                {homepage?.About?.email}
              </div>
            </div>
            <div className='space-y-1'>
              <h1 className='text-5xl'>Watch.</h1>
              <p className='ml-2 max-w-md text-gray-600'>
                {homepage?.About?.watch}
              </p>
            </div>
          </div>
        </section>
      </div>
      {/* projectsection */}
      <section id='project'>
        {homepage?.Project?.map((project) => {
          return (
            <div
              key={project?.title}
              className='relative h-screen grid grid-rows-2 grid-cols-1 md:grid-rows-1 md:grid-cols-2 
                text-white justify-items-center place-items-center p-2'
            >
              <NextImage
                src={project?.bg?.url!}
                layout='fill'
                objectPosition='center'
                objectFit='cover'
                className='z-0 bg-blend-overlay bg-gray-600'
              />
              <div className='z-10 place-self-start p-2 md:p-10'>
                <h3 className='text-4xl sm:text-5xl'>{project?.title}</h3>
                <p className='text-sm sm:text-lg sm:max-w-sm'>
                  {project?.description}
                </p>
                <Link href={`${project?.url}`} className='text-blue-400 '>
                  {project?.url}
                </Link>
                <div className='flex uppercase space-x-4'>
                  {project?.tools?.split(',').map((tool) => (
                    <p key={tool} className='bg-gray-500 px-1 rounded-sm'>
                      {tool}
                    </p>
                  ))}
                </div>
              </div>
              <div className='-mt-40 md:-mt-0'>
                <NextImage
                  src={`${project?.image?.url!}`}
                  height={project?.image?.height!}
                  width={project?.image?.width!}
                />
              </div>
            </div>
          );
        })}
      </section>
      {/* recentblogs */}

      <section>
        <div className='p-5 bg-gradient-to-tr from-blue-300 to-indigo-500  my-10'>
          <div
            className='p-2 grid gap-5 grid-cols-1
           grid-rows-1 md:grid-cols-2 lg:grid-cols-3  w-full'
          >
            {posts?.map((post) => (
              <BlogCard
                key={post?.description!}
                updated_at={post?.updated_at!}
                topics={post?.topics!}
                title={post?.title!}
                slug={post?.slug!}
                description={post?.description!}
              />
            ))}
          </div>
          <div className='flex justify-end px-4 pb-2'>
            <Button>More Blogs</Button>
          </div>
        </div>
      </section>

      {/* contact section */}
      <section id='contact'>
        <div className='flex flex-col items-center justify-center my-32'>
          <h4 className='text-6xl'>{homepage?.Contact?.title}</h4>
          <div className='flex space-x-10 my-4'>
            <Link href={`mailto:${homepage?.Contact?.email}`}>
              <GrMail size={30} color='black' />
            </Link>

            <Link href={homepage?.Contact?.insta!}>
              <AiFillInstagram size={30} color='black' />
            </Link>

            <Link href={homepage?.Contact?.youtube!}>
              <AiFillYoutube size={30} color='black' />
            </Link>

            <Link href={homepage?.Contact?.twitter!}>
              <AiOutlineTwitter size={30} color='black' />
            </Link>
          </div>
          <h3 className='flex items-center justify-center my-10'>
            {homepage?.creditText}
          </h3>
        </div>
      </section>
    </div>
  );
};

export default Home;

And that is it about building the landing page using tailwindcss and nodejs google. In another blog post, we'll create a Playlists and Playlist page. If you have any problem with this code and then let me know in the discussion.

Using google storage to store media files in strapi

Bishal Neupane — Sun, 14 Nov 2021 09:59:27 +0000

This is the fourth blog post on the series of blog post I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

In this blog post, we're going to set up google bucket to store our media files.
So go ahead and install a plugin

 yarn add strapi-provider-upload-google-cloud-storage
 or 
 npm i strapi-provider-upload-google-cloud-storage

Now we've to create a google cloud bucket and generate the service account for that
I'm using the firebase project which makes it very easy to create a google bucket and generate the service account You can create a google bucket through google cloud console too. If you're using firebase then go to project settings and service account. Click the Generate a new private key. This will download a simple file with JSON data on it. We've to copy that JSON data and stringify it and put it as an environment variable in our strapi app.

Let's create the env file with GCP_SERVICE_ACCOUNT !

After that create a plugins.js file in the config and add the following code

 module.exports = ({ env }) => ({
  upload: {
    provider: "google-cloud-storage",
    providerOptions: {
      bucketName: "yourbucketnamehere",
      publicFiles: true,
      uniform: false,
      basePath: "",
      serviceAccount: env.json("GCP_SERVICE_ACCOUNT"),
    },
  },
});

And that's it now we should be uploading files to the google bucket instead of a local file system. Now you can upload any media file and it will end up in your google bucket as:

You can see it creates a bunch of files and folders when uploading files as it creates a different responsive version of the images that you upload. you can change this setting from within strapi admin as

And that is it about using google Buckets to store media files in strapi. The process for uploading to other providers is also pretty similar. In another blog post, we'll create our landing page. If you have any problem with this setup and then let me know in the discussion.

Generate type information from gql graphql query using graphql code generator

Bishal Neupane — Mon, 08 Nov 2021 11:40:21 +0000

This is the third blog post on the series of blog post I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

In the last blog, we created the content-type that we would need in our application and also wrote a simple graphql query that would get us all the data required for our landing page.
In this blog post, we are going to add a graphql code generator to generate type information from our gql graphql queries that we will be writing. Having type information is very helpful during development and saves a lot of time from not having to make simple type mistakes.

So first thing first go to your nextjs project and run

yarn add -D @graphql-codegen/cli @graphql-codegen/gql-tag-operations-preset @graphql-codegen/typescript-operations 
or
npm i -D @graphql-codegen/cli @graphql-codegen/gql-tag-operations-preset @graphql-codegen/typescript-operations

Now, create a new file in the project root and name it codegen.yaml and paste the following

overwrite: true
schema: 'http://localhost:1337/graphql'
documents:
  - 'src/**/*.ts'
  - '!src/gql/**/*'
generates:
  src/gql/:
    preset: gql-tag-operations-preset
    plugins:
      - typescript
      - typescript-operations

With this in place, let's issue the same query that we had in the last post that is

 query HomePage {
    homepage {
      Hero {
        title
        navlinks
        profile {
          url
        }
      }
      About {
        work
        blogs
        watch
        email
      }
      Project {
        title
        description
        tools
        image {
          url
        }
        url
        bg {
          url
        }
      }
      Contact {
        email
        insta
        linkedin
        twitter
        youtube
        title
      }
    }
  }

To make graphql request, we'll be using graphql-request so install it

 yarn add graphql-request graphql
 or 
 npm i graphql-request graphql

Now let create a folder src and move the pages and styles to src. also, create query and gql folder inside src folder

Now inside the queries folder add a file named homepage.ts and paste the following code

import { gql } from 'graphql-request';

export const exQuery = gql`
  query HomePage {
    homepage {
      Hero {
        title
        navlinks
        profile {
          url
        }
      }
      About {
        work
        blogs
        watch
        email
      }
      Project {
        title
        description
        tools
        image {
          url
        }
        url
        bg {
          url
        }
      }
      Contact {
        email
        insta
        linkedin
        twitter
        youtube
        title
      }
    }
  }
`;

To generate the type information we have to use the graphql codegen cli tool so let's add a script to package.json

"gen": "yarn graphql-codegen --watch",

After adding this run

yarn gen
or 
npm run gen

This will run the graphql-codegen on watch mode and generate the type information from any exQuery that we've added. To confirm that we can see new files being added to the gql folder as

With that now let's use this query inside our nextjs page
So, replace the code in your index.ts with the following

import type { NextPage } from 'next';
import { request } from 'graphql-request';
import { exQuery } from '../queries/homepage';
import { HomePageQuery } from '../gql/graphql';
import { useEffect, useState } from 'react';

const Home: NextPage = () => {
  const [data, setData] = useState<HomePageQuery>();
  const query = async () => {
    const data: HomePageQuery = await request(
      'http://localhost:1337/graphql',
      exQuery
    );
    setData(data);
  };
  useEffect(() => {
    query();
  }, []);
  console.log(data?.homepage?.About?.blogs);
  return (
    <div>
      <p className='font-bold italic'>This is tailwindcss</p>
    </div>
  );
};

export default Home;

Now we get that nice autocompletion all thanks to the graphql code gen.

This is it for generating the type information from gql graphql query. In another blog post, we'll create our landing page.
If you have any problem with this setup and then let me know in the discussion.

Strapi content-type for simple portfolio and blog application

Bishal Neupane — Mon, 08 Nov 2021 10:24:05 +0000

This is the second blog post on the series of a blogposts I am posting about strapi,nextjs, and tailwind. We are recreating my portfolio/blogpost page that along the way we'll learn the fundamentals of strapi,nextjs, and tailwind. You can check it out at myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

In the last blog post we created bare-bones setup for strapi and nextjs with tailwindcss if you have not read the first blog post then go ahead https://dev.to/bishaln/strapinextjs-and-tailwind-setup-50nk
In this blog post, we're going to look at the strapi's content-type and build our content-type for our portfolio/blog application.

Content-type builder

It is a core plugin of strapi that allows us to manage the content-types and content-type defines the type of data that we want to use in our application. There are a few terms that we need to be aware of before going forward with this

Collection type - It is a content-type that can manage entries of the same content-type
Single type - It is also a content-type that can only manage single entry
Components are a data structure that can be used in multiple collection types and single types.

We've some regular fields that we can use in our content-type most of them are obvious so I will not bother explaining them

text-field
rich-text
number
date
boolean
relation - used to establish relationships with another content-type
email
password
enumeration
media
json
uid

Now that we have a decent understanding of strapi's content-type let's create the content type that we will need for our app.
We'll have in total 4 content types as

Homepage - This is a single type that will contain all the data for our portfolio landing page
Writer - This is a collection type that will contain info about the writer of the blog posts
Post - This is a collection type
Playlist - This is a collection type that will contain posts related to the playlist

Let's create them inside the strapi admin for that Inside your strapi project run

yarn develop
or
npm run develop

Go to http://localhost:1337/admin and click the content-type builder in the plugins list

Homepage

First let's create the homepage single type click on create a single type link and give it a name Homepage
and Before adding any components or fields to our homepage single type I want you to visit the final app here https://myportfolioandblog.vercel.app/
If you see it carefully then it has 5 distinct sections

hero
about
projects
recent blogs
contacts

we'll create 4 components named hero, about, projects, and contacts. We will not create a recent blogs component for now;
Inside the homepage single type click on add another field and select the component. Create a new component with the name Hero and a category with hero. Click on the configure selecting the single component.
Now let's add some fields to this component
title - text field
navlinks - text field
profile - media
After adding this field the homepage single type looks something like this

Now let's add another component About follow the similar process and add these fields to the About component

work- text field select the long text radio
blogs- same as work
watch- same as work
email- same as work

Add another component Project follow the similar process but this time select the repeatable type instead of a single type so that we can add multiple projects and add these fields to the Project component

title - text field for short text
description - text field for long text
url - text field for short text
image - media
bg - media
tools - text field for short text

Finally, let's add the Contact component follow the similar process this time make it a single type, and add these fields.

email - text field for short text
insta - same as email
linkedin - same as email
twitter - same as email
youtube - same as email
title - same as email

Make sure to save the homepage. After all that we can now add real data to the homepage single type.

Go ahead and add some dummy data to the homepage if you want to
Now we can focus on the other three collection types

Writer

Go to content type builder and select create a new collection type and name it writer
Add these fields to the writer content type and save it

name - text field for short text
avatar - media for avatar
bio - text field for long text

Post

Once again let's create another content type with the following fields and save it

title - text field for short text
description - rich text
topics - text field for short text
slug - text field for short text make it unique to do that go to advanced tab and select unique
writer - relation select writer content type and post has and belongs to one user

Playlist

Once again let's create another content type with the following fields and save it

title - text field for short text
description - text field for long text
slug - text field for short text make it unique to do that go to advanced tab and select unique
posts - relation select posts content type and playlist has many posts

we have to add some relation fields to posts and writers first let's add a playlist relation to posts
as post has one playlist save it.
Inside the writer, content-type add posts relation as a writer has many posts and save it

Now go ahead and some dummy data to all the content-types so that we can query them;
Before querying them we have to make all the content-types find and findone functions publicly available to do that goto
settings -> user permission roles -> public and check all the find and findones

So now, to test lets query for all the data that you will need for the landing page;
This query fetches all the data required for the landing page; cool isn't it?

query {
  homepage {
    Hero {
      title
      navlinks
      profile {url}
    }
    About {
      work
      blogs
      watch
      email
    }
    Project {
      title
      description
      tools
      image {url}
      url
      bg {url}
    }
    Contact {
      email
      insta
      linkedin
      twitter
      youtube
      title
    }
  }
}

So this is it for the content-type in strapi and we have added required content-types for our project. In the next blog post we will setup nextjs to make graphql requests and generate some type information from our queries. If you had any problem following along then let me know in the discussions

Strapi,Nextjs and Tailwind setup

Bishal Neupane — Sun, 07 Nov 2021 13:16:14 +0000

This is the first blog post on the series of a blog posts I will be posting about strapi,nextjs, and tailwind. We will be recreating my portfolio/blogpost website and along the way, we'll learn the fundamentals of strapi,nextjs and tailwind. You can check my myportfolio If you know the basics of javascript and react then you should be good to follow this blog post and coming blog post on the series. I hope you'll get something out of this series.

I am assuming that you have nodejs installed in your machine and I will be using yarn instead of npm you don't have to use yarn if you want then make sure to install yarn globally as

npm i -g yarn

Strapi

It is a headless content management system. Headless means it only serves data and not HTML and CSS. This is very powerful since we will just be getting the data that we care about and we can write the UI logic to display it nicely. We can use the same API endpoint in all the platforms to request the data be it web, mobile, or desktop.
It comes with an admin UI that helps us to manage the content easily. Enough talk now let's see it in action;

To create a brand new strapi app run

 yarn create strapi-app nameofyourapp
 or
 npx create-strapi-app my-project

It will ask for the installation type select custom and no for template choose sqlite as the development database we'll use postgres in production.
It will create a bunch of files for us we don't have to worry about any of the files created for now;
So go ahead and run

 yarn develop

It will first build the admin UI and spin up the server by default at http://localhost:1337
Now go ahead and open that link in a browser and for the first time, it will ask you for your credentials that we will use to login to the admin. After all that we should see an admin interface;
In strapi we first create the content-type think of it is a data structure or table schema. Now let's create a simple content-type say an Author with username, bio and image.

Go to the content-types builder and click on create new collection type and Name your collection type Author and add some fields to it. Hit the save button it will restart the server and add Author as your new collection type alongside the users which is the default collection type used for authentication purposes.

Now let's add some dummy author data so that we can query them with an HTTP request to do that go to the author collection data and click the add new authors button. Fill in the data save it and publish it then we should be able to see the newly added author in the author's collection type.
To get this data first we have to make this content publicly available to do that let's go to
settings -> roles -> public and check the find and findone permissions and hit save.
Now let's make a simple get request to http://localhost:1337/authors you should get something like this

Strapi by default processes the image that we upload to the media library but we can change the setting, for now, let's keep things simple. For this project, I want to make use of graphql instead of rest. If you have never made use of graphql then don't worry it is very simple. It provides several advantages that you can look up on the internet, for now, let's install a strapi plugin that will allow us to make graphql requests to our strapi server.

Go ahead and run;

 yarn strapi install graphql
 or
 npm run strapi install graphql

After successful installation, we should be able to open up graphql playground at http://localhost:1337/graphql
In graphql for get request we use query and for others mutation. Let's write a simple query to get all the authors.

 query {
  authors {
    id
    created_at
    username
    bio
    avatar {
      url
    }
  }
}

We'll talk more about the strapi content-types and relation in another blog post for now let's focus on setting up Nextjs and Tailwind.

# Nextjs
It is a react framework that makes server-side rendering(SSR) and static site generation(SSG) super simple. In a normal create react app everything is computed client-side the user browser which is not good for performance as well as SEO. So we're going to make use of static site generation since the portfolio and blog site does not change that much.
The difference between SSR and SSG is that in SSG nextjs pulls all the data during the build process and creates all pages that you have. When someone requests to access your page they will be served the pages which were built during the build process and without making any backend calls. This improves the performance of your website as well as decreases the load to your backend server whereas in SSR nextjs makes requests to your backend server for every request from the clients creates the page on the server and then serves it to the client.

Let's setup nextjs with typescript

yarn create next-app --typescript
or
npx create-next-app@latest --typescript

This will install all the dependencies and setup a simple page

yarn dev
or 
npm run dev

This starts the next server in dev goto http://localhost:3000

Tailwindcss

It is a utility-first CSS framework that makes building UI simple and faster.
Now let's add tailwindcss into the mix

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
or
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

Add this code snippet to the global CSS file

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

If you are using vs code then you can install the tailwindcss extension that will give you cool autocompletion so that you don't have to remember the class names;

Now let's remove all the markup from the index.tsx file and test simple class from tailwind to make the text bold and italic;

import type { NextPage } from 'next';

const Home: NextPage = () => {
  return (
    <div>
      <p className='font-bold italic'>This is tailwindcss</p>
    </div>
  );
};

export default Home;

That is it for this blog post in the coming blog post we will discuss more about strapi content-types and add all the necessary content types for the portfolio/blog page Till then stay tuned if you have any questions about the current setup the let me know in the discussions

Creating a CRUD Rest API using Nestjs

Bishal Neupane — Wed, 13 Oct 2021 13:32:07 +0000

Nestjs is a nodejs framework that comes with lots of features out of the box unlike others such as expressjs, fastify which are minimal. Nestjs makes use of typescript by default which gives type safety to the project. Thus, keeping it safe from type errors which are quite common with javascript.

In this tutorial, we are going to create a simple application that will help us create, read, update and delete notes about a topic.
Complete Project Github Repo

First thing first make sure you have installed nodejs into
your machine. node -v if it gives back some version number then we are good to go otherwise make sure you download and install nodejs from here nodejs download

Now lets install nest cli;

npm i -g @nestjs/cli
          or
yarn global add @nestjs/cli

Let's create a brand new project using nest cli and I will name my project mynotes.

nest new mynotes

This will create mynotes folder and a bunch of files that will get us up in running with nestjs. The main.ts file inside the src directory contains the main logic to start the nest application.
Nestjs under the hood makes use of expressjs for HTTP implementation by default so we see expressjs like syntax to start the application.

Before going through other files there are some term some terms that we need to know about nestjs;

Module In nest we divide our project into several modules and these modules can be imported by other modules in the same project. It is also used to register imports, controllers and providers
Controllers It is the actual route handlers
Services It contains the actual business logic that will be executed on the controllers
Repository It is used to define the data stores e.g Database entity i.e table

Now we know the basic terminologies, Let's go through all the other files created for us

app.module.ts this file registers all the controllers and providers that are available in this module
app.controllers.ts this file has an actual Get route handler that returns hello world using the app service
app.services.ts is injectable meaning we can use dependency injection that is how we are making use of getHello function on our app.controllers.ts file.
app.controller.spec.ts is a test file where we can write a unit test.

For this tutorial, we will only use the app.module.ts, app.controller.ts, and main.ts files. we will not make use of any other files so we can delete them.

Update the code in app.module.ts and app.service.ts to;

//app.module.ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';

@Module({
  imports: [],
  controllers: [AppController],
})
export class AppModule {}

//app.controller.ts
import { Controller, Get } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  getHello(): string {
    return 'hello world';
  }
}

Now let's create the POST endpoint to create the new notes with topic and description as a string for that we can use @post and @BODY decorator from the @nest/common

import { Body, Controller, Get, Post } from '@nestjs/common';

type note = {
  topic: string;
  description: string;
  id: number;
};

@Controller()
export class AppController {
  notes: note[] = [];

   @Post()
  createnote(@Body() { description, topic }: note) {
    const randomId = Math.floor(Math.random() * 999);
    const note = { description, topic, id: randomId };
    this.notes.push(note);
    return note;
  }
}

This will accept the post request at the root route and create a note and append it to the array. It returns the post created.

Now let's create the GET endpoint that will return all the notes created and another that will return the note by id.

@Get()
  getAllnote(): note[] {
    return this.notes;
  }

  @Get('/:id')
  getNoteById(@Param('id') id: number): note {
    const noteIndex = this.notes.findIndex((note) => note.id === Number(id));
    return this.notes[noteIndex];
  }

Let's add the update functionality using a PUT endpoint

 @Put('/:id')
  updatenote(@Param('id') id: number, @Body() newNote: Partial<note>): note {
    const noteIndex = this.notes.findIndex((note) => note.id === Number(id));
    this.notes[noteIndex] = { ...this.notes[noteIndex], ...newNote };
    return this.notes[noteIndex];
  }

Finally, Let's implement the DELETE method

 @Delete('/:id')
  deletenote(@Param('id') id: number): boolean {
    const noteIndex = this.notes.findIndex((note) => note.id === Number(id));
    if (noteIndex === -1) return false;
    delete this.notes[noteIndex];
    return true;
  }

We used the POST method to create the new note, the GET method to get notes, the PUT method to update the note, and the Delete method to delete the notes. So, that is it about this CRUD tutorial.