DEV Community: Lag and Log

Free icons for your next project

Sasidharan — Tue, 13 Jul 2021 14:30:21 +0000

Here some of the free icons we can use in any library for our next projects and do wish to credit the creator.

1. Hero Icons - Visit

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Simple to use.

2. Flaticon - Visit

The largest database of free icons available in PNG, SVG, EPS, PSD, and BASE 64 formats. More variants so more to choose from.

3. The Noun Project - Visit

The World’s Most Diverse and Extensive Icon Collection. Over 3 million unique and simple icons.

4. TablerIcons - Visit

Open source, fully customizable 1000+ icons.

5. Icons8 - Visit

The modern, unique set of icons in both SVG and png formats. Available in various styles.

View all

These are the various icon sets that I came across, feel free to add your favorite and go-to icons library in the comments below.

Note: Go through the website to learn about free licensing on illustrations that you use.

Happy coding!

How to dockerize React App

Sasidharan — Sun, 02 May 2021 06:41:09 +0000

Developing apps today requires so much more than writing code. Multiple languages, frameworks, architectures, and discontinuous interfaces between tools for each lifecycle stage create enormous complexity. It helps to speed up the development and deployment processes. If you’re working with microservices, Docker makes it much easier to link together small, independent services.

React is an open-source, front-end, JavaScript library for building user interfaces or UI components. React can be used as a base in the development of single-page or mobile applications.

I recently came up with a situation to containerize my React application, so learned the steps to containerize production-ready applications and I'm sharing the same in this log,

Step 1

To create react application via the command line, you should have Node installed on your computer.

Node Download

npx create-react-app my-app
cd my-app
npm start

That's it. Open http://localhost:3000/ to see your app.

The folder structure will look like this,

 my-app/
      README.md
      node_modules/
      package.json
      public/
        index.html
        favicon.ico
      src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

Step 2

Before we containerize our application, we should create a special file that Docker understands, i.e, Dockerfile in the root of your application.

my-app/
      Dockerfile <-
      README.md
      node_modules/
      package.json
      public/
        index.html
        favicon.ico
      src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

Docker builds images automatically by reading the instructions from a Dockerfile

A Docker image consists of read-only layers each of which represents a Dockerfile instruction. The layers are stacked and each one is a delta of the changes from the previous layer.

Without further ado, let's write into our Dockerfile,

FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
RUN npm i --silent
COPY . ./
RUN npm run build

FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Each instruction creates one layer:

FROM creates a layer from the node:13.12.0-alpine Docker image.
COPY adds files from your Docker client’s current directory.
RUN builds your application with make.
CMD specifies what command to run within the container.

When you run an image and generate a container, you add a new writable layer (the “container layer”) on top of the underlying layers. All changes made to the running container, such as writing new files, modifying existing files, and deleting files, are written to this thin writable container layer.

Step 3

Now, let's build our Dockerfile,

docker build -f Dockerfile -t my_react_app:prod .

In the first 7 lines of the Dockerfile,

it pulls the image that we specified in FROM and starts executes all our commands, and generates a single page react build.

the rest,

takes that build folder, pulls Nginx image from Dockerhub, and copies our build to the /html folder we specified. Now Nginx serves our React application inside port 80 inside the container.

After all the steps/layers in Dockerfile are completed successfully, we can spin up the image using the following command,

docker run -it --rm -p 5000:80 my_react_app:prod

in this, the port 80 from container listens in 5000 in our machine, which means we can view our application on http://localhost:5000

With this, now you can able to containerize your application in a docker. The steps will be similar to all large react projects.

Follow me on twitter - https://twitter.com/sasiKdharan

Happy Coding 🤖

Blog using Gatsby and Strapi

Sasidharan — Sun, 02 May 2021 06:38:24 +0000

Gatsby is a React-based framework, popular for performance, static site generation, and scalability. We have covered everything you need to Get Started with Gatsby

Because it is based on React, the website pages are never reloaded which makes the generated website super fast. A large set of plugins is available to allow developers to save time coding.

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable, and developer-first.

Prerequisites

You need to have node v.12 installed.
Basic knowledge of ReactJs and Javascript.

Checkout Get Started logs for Gatsby and Strapi,

I am using the same sample application that was created in the above logs. After completing the Gatsby project setup, and start editing the index.js file in /pages folder.

Connect Gatsby with Strapi

Strapi built a plugin for gatsby called gatsby-source-strapi , install the plugin in our Gatsby application using the command,

yarn add gatsby-source-strapi

(or)

npm install gatsby-source-strapi`

This plugin needs to be configured, so inside plugins array add the following code:


{
 resolve: "gatsby-source-strapi",
 options: {
 apiURL: process.env.API_URL || "http://localhost:1337",
 contentTypes: ["blog"],
 queryLimit: 1000,
 },
}

This will allow Gatsby to fetch all our blogs on build time.

Now you can start creating components and layouts for our blog. To get list of all blog posts inside our component refer to the following Graphql query,

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import PostComponent from "../components/posts";

const IndexPage = () => {
  const data = useStaticQuery(query);

  return (
      <div>
        <div>
          <h1>Posts</h1>
          <PostComponent articles={data.allStrapiPost.edges} />
        </div>
      </div>
  );
};

const query = graphql`
  query {
    allStrapiBlog(filter: { status: { eq: "published" } }) {
      edges {
        node {
          strapiId
          slug
          title
          }
        }
      }
    }
  }
`;

export default IndexPage;

This will query all the posts and the data is passed via data props to the component.

Use the list of posts to render your blog posts on the page. Make your own styles.

Image Source - Strapi Blog

You can also use Javascript fetch() to list all posts via a REST API call to localhost:1337/blogs and render it on the screen.

To create pages dynamically for all posts during build time, we have gatsby.node.js file

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(
    `
      {
        posts: allStrapiPost {
          edges {
            node {
              strapiId
              slug
            }
          }
        }
      }
    `
  );

  if (result.errors) {
    throw result.errors;
  }

  // Create blog pages.
  const posts = result.data.articles.edges;

  const PostTemplate = require.resolve("./src/templates/post.js");

  posts.forEach((post, index) => {
    createPage({
      path: `/post/${post.node.slug}`,
      component: PostTemplate,
      context: {
        slug: post.node.slug,
      },
    });
  });
};

It will create pages for all your slugs dynamically.

/post/my-first-post
/post/another-post
/post/my-second-post

using any markdown packages to render your markdown as HTML in Gatsby frontend.

For more details, visit the documentation

Gatsby and Strapi

Happy Coding 👾

AMA on https://twitter.com/sasiKdharan

LL Beta is out🎉

Sasidharan — Mon, 15 Feb 2021 18:39:54 +0000

Knowledge sharing needs a simple platform!

https://lagandlog.com

The easiest way to share knowledge and keep building your portfolio online.

Rebuild your personal growth with Lag and Log and make use of the following features,

Write and share your thoughts seamlessly.
Follow interests and topics.
Grow with your community.
Get noticed for promising content.
Get your own portfolio. (ex - https://sudo.lglg.me)
Use your own domain for your site.
Completely free to use.

Start using https://lagandlog.com/user/onboard and grow yourself by writing.