DEV Community: collegewap

How to add favicon to a Next.js site?

collegewap — Sat, 20 Jan 2024 07:21:44 +0000

You might have seen the following default favicon in your Next.js site and want to change it.

In this article, we will see how to do the same.

Creating a favicon

You can use sites like https://favicon.io/favicon-generator/ to generate a favicon.

It will generate the favicon of different sizes and also you can generate icons for adding your website to the home screen on mobile devices.

Now download the generated favicon and place the files in the public folder:

It is not necessary to have all the files. To add favicon, the favicon.ico file is sufficient

Including the favicon

You can include the favicon file along with manifest files in the _document.js file as shown below:



import { Html, Head, Main, NextScript } from "next/document"

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

If you want to just add the favicon and not the manifest file, the above step is not required,
all you need to do is replace the favicon.ico in the public directory with the one you want and the browser will use it automatically.

If you reload the page now, you should be able to see the favicon loaded:

You can load favicon from other sites as well like shown below:



<link
  rel="icon"
  type="image/png"
  href="https://www.codingdeft.com/favicon.ico"
/>

Python If Else shorthand with examples

collegewap — Sun, 09 Apr 2023 08:20:57 +0000

Have you ever wondered if you can write if else statements in the same line like a ternary operator: x=a>10?"greater":"not greater" in Python?

In this article, we will see how to write Shorthands for if else statements in Python.

Simple if condition

We can write a simple if condition in Python as shown below:

x = 10
if x > 5:
  print("greater than 5")

There are no shorthands for simple if statements.

If else statements

Consider the following if else statement:

x = 10
if x%2 == 0:
  print("Even")
else:
  print("Odd")

We can shorten it as shown below:

x = 10
print("Even") if x%2 == 0 else print("Odd")

The syntax here is

action_if_true if condition else action_if_false

You can assign the result to a variable as well:

age = 20
status = "adult" if age >= 18 else "minor"
print(status)

Else if ladder

In Python you can write an else-if ladder as shown below:

x = 10
if x > 5:
  print("greater than 5")
elif x==5:
  print("equal to 5")
else:
  print("less than 5")

The shorthand for the else-if ladder would be:

x=4
print("greater than 5") if x > 5 else  print("equal to 5") if x==5 else print("less than 5")

Using tuples as a ternary operator

Python has the following syntax to assign the boolean value of the result. However, this is a confusing syntax and is not used widely.

x = 5
is_five = (False, True)[x == 5]
print(is_five)

How to render array of components in React

collegewap — Sun, 09 Apr 2023 08:19:52 +0000

You might often encounter scenarios to render a list of components. In this article, we will see how to do the same.

Project setup

Create a react app using the following command:



npx create-react-app react-components-array

Now install the react-icons package:



npm install react-icons

This is required since we will be displaying a list of icons.

Creating an array of components

Consider the following component:



const Item = ({ value }) => {
  return <li>{value}</li>
}

We can create a list of items as shown below:



const items = [<Item key={1} value={1} />, <Item key={2} value={2} />]

Rendering the component array

Rendering an array of components is as easy as rendering variables in React:



import React from "react"

const Item = ({ value }) => {
  return <li>{value}</li>
}

const App = () => {
  const items = [<Item key={1} value={1} />, <Item key={2} value={2} />]

  return <ul>{items}</ul>
}

export default App

All you need to do is add the array within the flower brackets {items}.

You can dynamically create the array of components as shown below:



import React from "react"

const Item = ({ value }) => {
  return <li>{value}</li>
}

const App = () => {
  const items = Array.from({ length: 10 }).map((_, index) => (
    <Item key={index} value={index + 1} />
  ))

  return <ul>{items}</ul>
}

export default App

Storing components in an Array of objects and rendering them

Consider the following array:



import {
  MdOutlinePhone,
  MdOutlineFavorite,
  MdOutlineContactPhone,
} from "react-icons/md"

const menu = [
  {
    name: "Recents",
    icon: MdOutlinePhone,
  },
  {
    name: "Favorites",
    icon: MdOutlineFavorite,
  },
  {
    name: "Contacts",
    icon: MdOutlineContactPhone,
  },
]

If you want to render the icons stored inside the array, you can do so by using the following code:



return menu.map(item => {
  return (
    <li key={item.name}>
      <item.icon /> {item.name}
    </li>
  )
})

The complete code would be:



import React from "react"
import {
  MdOutlinePhone,
  MdOutlineFavorite,
  MdOutlineContactPhone,
} from "react-icons/md"

const menu = [
  {
    name: "Recents",
    icon: MdOutlinePhone,
  },
  {
    name: "Favorites",
    icon: MdOutlineFavorite,
  },
  {
    name: "Contacts",
    icon: MdOutlineContactPhone,
  },
]

const App = () => {
  return menu.map(item => {
    return (
      <li key={item.name}>
        <item.icon /> {item.name}
      </li>
    )
  })
}

export default App

If you run the app now, you will see the following output:

How to use media queries in styled components

collegewap — Sun, 09 Apr 2023 08:18:34 +0000

In this article, we will see how to use media queries in styled components.

Project setup

Create a react application using the following command:

npx create-react-app styled-components-media-queries

Install the styled-components package:

npm i styled-components

Add the following code in App.js

import React from "react"
import styled from "styled-components"
import { devices } from "./constants"

const Items = styled.p`
  margin: 10px;
  display: flex;
  gap: 10px;
  flex-direction: column;
`
const Item = styled.p`
  padding: 10px;
  flex: 1;
  border: 1px solid;
`
const App = () => {
  return (
    <div>
      <Items>
        <Item>1</Item>
        <Item>2</Item>
      </Items>
    </div>
  )
}

export default App

Here we have 2 blocks of items that are aligned vertically. If we need to align them horizontally next to each other on large screens, then we need to apply media queries.

Creating breakpoints

Before applying media queries, let's create breakpoints that can be reused.

const breakpoints = {
  xs: "320px",
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px",
}

export const devices = {
  xs: `(min-width: ${breakpoints.xs})`,
  sm: `(min-width: ${breakpoints.sm})`,
  md: `(min-width: ${breakpoints.md})`,
  lg: `(min-width: ${breakpoints.lg})`,
  xl: `(min-width: ${breakpoints.xl})`,
  "2xl": `(min-width: ${breakpoints["2xl"]})`,
}

Applying media query

We can apply media query in styled components in the same way we apply media queries in CSS:

import React from "react"
import styled from "styled-components"
import { devices } from "./constants"

const Items = styled.p`
  margin: 10px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  @media only screen and ${devices.md} {
    flex-direction: row;
  }
`
const Item = styled.p`
  padding: 10px;
  flex: 1;
  border: 1px solid;
`
const App = () => {
  return (
    <div>
      <Items>
        <Item>1</Item>
        <Item>2</Item>
      </Items>
    </div>
  )
}

export default App

Now i=on larger screens, the items will be aligned next to each other.

How to use Local Storage in Next.js

collegewap — Sun, 09 Apr 2023 08:16:25 +0000

Have you received the following error while using local storage in Next.js?



ReferenceError: localStorage is not defined

In this article, we will see how to use local storage in Next.js

Project set up

Create a Next.js application using the following command:



npx create-next-app next-local-storage

Update index.js with the following code:



import { useState } from "react"

export default function Home() {
  let value
  // Get the value from local storage if it exists
  value = localStorage.getItem("favoriteNumber") || ""

  // Set the value received from the local storage to a local state
  const [favoriteNumber, setFavoriteNumber] = useState(value)

  // When user submits the form, save the favorite number to the local storage
  const saveToLocalStorage = e => {
    e.preventDefault()
    localStorage.setItem("favoriteNumber", favoriteNumber)
  }

  return (
    <div>
      <label htmlFor="number">Your favorite number</label>
      <form onSubmit={saveToLocalStorage}>
        <input
          id="number"
          value={favoriteNumber}
          onChange={e => setFavoriteNumber(e.target.value)}
        />
        <input type="submit" value="Save" />
      </form>
    </div>
  )
}

Now if you run the code, you will get the following error:

Why does the error occur?

The error occurs because the code gets compiled in the server (in localhost or server-side rendering in production), localStorage object does not exist.

The fix

There are multiple ways in which it can be fixed.

Checking if the window is defined

localStorage is an object inside the window object. The window object will not be defined in the server and hence the localStorage code will not be executed in the server.



if (typeof window !== "undefined") {
  value = localStorage.getItem("favoriteNumber") || ""
}

Using try-catch block

We can use a try-catch block to surround the localStorage access:



try {
  value = localStorage.getItem("favoriteNumber") || ""
} catch (error) {}

Using a useEffect hook

You can use a useEffect hook to get the localStorage content. The useEffect hook will not be run in the server and hence no possibility of the error.



import { useEffect, useState } from "react"

export default function Home() {
  // Set the value received from the local storage to a local state
  const [favoriteNumber, setFavoriteNumber] = useState("")

  useEffect(() => {
    let value
    // Get the value from local storage if it exists
    value = localStorage.getItem("favoriteNumber") || ""
    setFavoriteNumber(value)
  }, [])

  // When user submits the form, save the favorite number to the local storage
  const saveToLocalStorage = e => {
    e.preventDefault()
    localStorage.setItem("favoriteNumber", favoriteNumber)
  }

  return (
    <div>
      <label htmlFor="number">Your favorite number</label>
      <form onSubmit={saveToLocalStorage}>
        <input
          id="number"
          value={favoriteNumber}
          onChange={e => setFavoriteNumber(e.target.value)}
        />
        <input type="submit" value="Save" />
      </form>
    </div>
  )
}

Using a custom hook

You can use a custom hook to access local storage as well



import { useState } from "react"

const useLocalStorage = (key, initialValue) => {
  const [state, setState] = useState(() => {
    // Initialize the state
    try {
      const value = window.localStorage.getItem(key)
      // Check if the local storage already has any values,
      // otherwise initialize it with the passed initialValue
      return value ? JSON.parse(value) : initialValue
    } catch (error) {
      console.log(error)
    }
  })

  const setValue = value => {
    try {
      // If the passed value is a callback function,
      //  then call it with the existing state.
      const valueToStore = value instanceof Function ? value(state) : value
      window.localStorage.setItem(key, JSON.stringify(valueToStore))
      setState(value)
    } catch (error) {
      console.log(error)
    }
  }

  return [state, setValue]
}

export default useLocalStorage

In index.js, you can use it as follows:



import useLocalStorage from "@/hooks/useLocalStorage"

import { useState } from "react"

export default function Home() {

  // Get the value from local storage if it exists

  const [value, setValue] = useLocalStorage("favoriteNumber", "")

// Set the value received from the local storage to a local state

  const [favoriteNumber, setFavoriteNumber] = useState(value)

// When user submits the form, save the favorite number to the local storage

  const saveToLocalStorage = e => {

    e.preventDefault()

    setValue(favoriteNumber)

  }

return (

    <div>

      <label htmlFor="number">Your favorite number</label>

      <form onSubmit={saveToLocalStorage}>

        <input

          id="number"

          value={favoriteNumber}

          onChange={e => setFavoriteNumber(e.target.value)}

        />

        <input type="submit" value="Save" />

      </form>

    </div>

  )

}

Source code and Demo

You can view the complete source code here and a demo here

How to add Google Analytics to Next.js app

collegewap — Sun, 09 Apr 2023 08:12:56 +0000

If you have started working with Next.js recently and wanted to add Google Analytics to your website, then you are at the right place!

Creating a Google Analytics tag

Now click on the Settings Icon (⚙️ Admin) at the bottom and click on Create Account
(If you already have an account, you can click on Create Property).

Now fill in the account name:

Fill in the property details along with the time zone and currency:

Finally, fill in the business details and click on Create:

Now you will be redirected to a page with the following options. Here click on Web.

In the next step provide your website details and click on Create stream.

Now you will be provided with a measurement id. Make a note of it. It will be used in the next step.

Creating a Next.js app

Now create a Next.js app, if you do not have one, using the following command:

npx create-next-app@latest next-ga-integration

Adding Google Analytics

Create a file named gtag.js with the following content (replace GA_TRACKING_ID value with yours):

export const GA_TRACKING_ID = "G-226MBLFR8V" //replace it with your measurement id

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = url => {
  window.gtag("config", GA_TRACKING_ID, {
    page_path: url,
  })
}

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value: value,
  })
}

We have 2 functions here:

pageview: To track users navigating to different pages.
event: To track events like add to cart, place order, etc.

Now open _app.js and include the following code:

import "@/styles/globals.css"
import Script from "next/script"
import { useRouter } from "next/router"
import { useEffect } from "react"
import * as gtag from "gtag"

export default function App({ Component, pageProps }) {
  const router = useRouter()
  useEffect(() => {
    const handleRouteChange = url => {
      gtag.pageview(url)
    }
    router.events.on("routeChangeComplete", handleRouteChange)
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange)
    }
  }, [router.events])

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gtag.GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />
      <Component {...pageProps} />;
    </>
  )
}

In the above code:

We have included the Google Analytics script and loading it after the page becomes interactive so that it doesn't affect the page loading time.
We have a useEffect where we listen to route changes and call the pageview function, defined inside gtag.js. This is required since in Next.js, whenever routing happens, the page doesn't completely reload and Google Analytics will not be able to pick up the route change automatically.

Now your application is setup with Google Analytics and you can track the live users:

How to set port in Next.js

collegewap — Sun, 09 Apr 2023 08:09:03 +0000

By default, when you run npm run dev, it will start the Next.js app in port 3000. There can be times when port 3000 is used by another application or you have a requirement to start the server in another port.
We will see how to achieve it in this article.

Creating a Next.js Project

First, create a new Next.js project using the following command:

npx create-next-app@latest next-set-port

Updating the port

Now let's say you want to change the port to 8090. You can open the package.json and update the dev script as follows:

"dev": "next dev -p 8090",

Now if you run npm run dev, you should be able to access the app at http://localhost:8090.

Setting the port for production build

If you want to run the project in a different port after it is built (after running npm run build),
you can do so by updating the start script:

"start": "next start -p 8090",

Now you can run npm start to see the page served at port 8090.

How to set the document title in React?

collegewap — Sat, 08 Apr 2023 10:27:36 +0000

In this article, we will see different ways to add document title in React.

Using index.html

You can edit the index.html file inside the public directory to set the document title.

Using the useEffect hook

The problem with updating the index.html directly is that we will not be able to have different titles for different pages.
So we can make use of the useEffect hook as shown below to have a unique title per page.



import { useEffect } from "react"

function App() {
  useEffect(() => {
    document.title = "My new title"
  }, [])

  return <div className="App"></div>
}

export default App

Using react-helmet library

While using useEffect will work fine, it involves many lines of code. It can get annoying to use it on many pages.
To solve this we can use libraries like react-helmet.

Install react-helmet using the following command:



npm i react-helmet

Now use it as shown below:



import { Helmet } from "react-helmet"

function App() {
  return (
    <div className="App">
      <Helmet>
        <title>Title using helmet</title>
      </Helmet>
    </div>
  )
}

export default App

Here the code looks more natural and you can add whichever tag you will use inside the head tag (meta, script, etc) using react-helmet.

How to call async/await functions in parallel

collegewap — Sat, 08 Apr 2023 10:26:20 +0000

Consider the following code:

const p1 = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("foo")
    }, 1000)
  })

const p2 = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("bar")
    }, 1000)
  })

We have 2 functions, which return a promise. Both the promises will resolve after 1 second. This is how we can mock async calls.

If we call the promises one after the other so that we can process the results together, as shown below,

const runSerial = async () => {
  console.time("runSerial")
  try {
    const r1 = await p1()
    const r2 = await p2()
    console.log([r1, r2]) //👉 [ 'foo', 'bar' ]
  } catch (error) {
    console.log(error)
  }
  console.timeEnd("runSerial") //👉 runSerial: 2.031s
}
runSerial()

The second promise will wait until the first one is resolved, then only the second function will be called.
This will result in a total execution time of at least 2 seconds.

So to reduce the turnaround time and still have all the results in one place, we can run them in parallel using Promise.all() and Promise.allSettled().

Using Promise.all()

We can use Promise.all as shown below:

const p1 = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("foo")
    }, 1000)
  })

const p2 = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("bar")
    }, 1000)
  })

const runParallelAll = async () => {
  console.time("runParallelAll")

  try {
    const p = await Promise.all([p1(), p2()])
    console.log(p) //👉 [ 'foo', 'bar' ]
  } catch (error) {
    console.log(error)
  }
  console.timeEnd("runParallelAll") //👉 runParallelAll: 1.026s
}
runParallelAll()

Now both calls will happen in parallel and the total time taken to resolve all the promises is the total time taken by the slowest promise.

The problem with Promise.all is, it will throw error if any one of the promises rejects.

const p1 = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("foo")
    }, 1000)
  })

const p2 = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("bar")
    }, 1000)
  })

const runParallelAll = async () => {
  console.time("runParallelAll")

  try {
    const p = await Promise.all([p1(), p2()])
    console.log(p)
  } catch (error) {
    console.log(error) // 👉 bar
  }
  console.timeEnd("runParallelAll")
}
runParallelAll()

As you can see in the above code, when a promise gets rejected, it will be caught and the rejected reason will be logged.

Using Promise.allSettled()

If you want the promise to be resolved even if any promises called in parallel get rejected, then you can use Promise.allSettled.

const p1 = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("foo")
    }, 1000)
  })

const p2 = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("bar")
    }, 1000)
  })

const runParallelAllSettled = async () => {
  console.time("runParallelAllSettled")

  try {
    const p = await Promise.allSettled([p1(), p2()])
    console.log(p) //👉 [{"status":"fulfilled","value":"foo"},{"status":"fulfilled","value":"bar"}]
  } catch (error) {
    console.log(error)
  }
  console.timeEnd("runParallelAllSettled") //👉 runParallelAllSettled: 1.014s
}
runParallelAllSettled()

Now you can loop through the following response and check which promise has been resolved and which has been rejected.

[
  { "status": "fulfilled", "value": "foo" },
  { "status": "fulfilled", "value": "bar" }
]

How to deploy React application to Firebase

collegewap — Sat, 08 Apr 2023 10:24:37 +0000

In this article, we will see how to create a firebase account and deploy a react application into firebase.

Project setup

Create a react application using the following command:

npx create-react-app react-firebase-deploy

Creating a firebase account

Navigate to https://console.firebase.google.com/ and click on Create a project.

Now you can choose either an existing project or create a new one and click Next:

Enable Google analytics if required and click on Create.

After a few minutes, firebase will be set up and you will be redirected to the dashboard page. Expand the Build tab on the left and click on Hosting.

Click on Get Started

Press Next in the following 2 steps and click on Continue to console in the last step.

Installing firebase tools

Now on your machine, run the following command to install firebase tools globally:

npm install -g firebase-tools

Now login to your Google account by running:

firebase login

This command will open a page in the browser where you can authorize log in.

Initializing firebase

Now inside your project, initialize firebase by running the following command:

firebase init

Now choose the hosting option given above.

Now select Use an existing project.

From the listed project, select the one to which you need to deploy:

In the hosting step,

Type build as the public directory.
Yes, for single we app.
No, for GitHub deploys.

Deploying to firebase

Now run the command firebase deploy inside your project.

Once the deployment is complete, it will print the URL of the deployed page.

Visit the page to validate the deployment.

How to deploy React application to GitHub Pages

collegewap — Sat, 08 Apr 2023 10:11:09 +0000

In this article, we will see how to deploy a react application GitHub pages.

This article assumes that you have a GitHub account, if not, create one here.

Creating the React App

Create a react app using the following command:

npx create-react-app deploy-github-pages

Now install the gh-pages package as a development dependency.
This helps in deploying the React app to GitHub pages.

npm install gh-pages -D

Updating package.json

Open package.json and add the following line:

"homepage": "https://<your_username>.github.io/<repo_name>"

Example:

"homepage": "https://collegewap.github.io/deploy-github-pages"

This will be the URL of your application when you deploy it.

Now add the following scripts to package.json:

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Here we have added 2 scripts, one is to build the project locally and another to upload the build files to GitHub pages.

This is how the package.json would look now:

{
  "name": "deploy-github-pages",
  "version": "0.1.0",
  "homepage": "https://collegewap.github.io/deploy-github-pages",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^4.0.0"
  }
}

Pushing the code to GitHub

Create a public repository named deploy-github-pages in GitHub.

If you want to deploy a private GitHub repository to GitHub pages, then you will have to upgrade your account.

Now add the files and commit the changes in your project:

git add *
git commit -m "Adding GitHub Pages"

Now add and push the code to the remote repository:

git remote add origin https://github.com/<username>/<repo_name>.git
# git remote add origin https://github.com/collegewap/deploy-github-pages.git
git push -u origin master # or main

Deploying to GitHub pages

Run the following command inside the project:

npm run deploy

Now it will create a branch called gh-pages and push it to the remote repository.

Now open your GitHub repository and click on Settings:

In Settings, choose Pages.

In the Build and deployment section,

Choose source as Deploy from branch.
Branch as gh-pages.
Folder as /(root).
Click on Save.

Again run the deploy command inside your project:

npm run deploy

Now your React application will be deployed to GitHub pages.

How to deploy Node.js application to Google Cloud (App Engine)?

collegewap — Sat, 08 Apr 2023 10:09:21 +0000

In this article, we will see how to deploy a Node.js application to Google App Engine.

Creating a Node.js application

Create a directory called nodejs-gcp-deploy and run the command npm init -y inside it.
This will create a default npm project.

Now install the following npm package inside the nodejs-gcp-deploy folder:

npm i express

Express helps in creating routes in Node.js applications.

Now create a file called index.js with the following code.

const express = require("express")
const app = express()

app.get("/", (req, res) => {
  res.send("Hello World!")
})

app.get("/ping", (req, res) => {
  res.send({ success: true })
})

app.listen(process.env.PORT || 3000, () => {
  console.log("Server is listening on port 3000")
})

Creating the app.yaml file

You need to specify what kind of project needs to be deployed using app.yaml file.

Create a file called app.yaml in the root directory of the project with the following code:

runtime: nodejs16

Creating a Project in Google Cloud

Navigate to the Google cloud console and create a new project:

Now click on NEW PROJECT

In the next screen provide a project name and click CREATE

It will take a few minutes to create the project and you will receive a notification once finished.

Now click on SELECT PROJECT. This will navigate you to the newly created project dashboard.

Now Search for App Engine and select it.

In the next screen click on CREATE APPLICATION

Now choose the region where you would want your application to be hosted (always chose a region where your majority of users are from).

Installing Google Cloud CLI

Install the google cloud CLI on your machine by running the following command in Powershell (Windows):

(New-Object Net.WebClient).DownloadFile("https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe", "$env:Temp\GoogleCloudSDKInstaller.exe")

& $env:Temp\GoogleCloudSDKInstaller.exe

If you are using any other operating system, you can find the instructions to install it here.

After the SDK is installed, open the command prompt in administration mode, navigate to the Node.js project directory,
and run the following command:

gcloud init

If you are running the above command for the first time, it will ask for logging in.
Once logged in choose the account where the project is created and then the project.

Now deploy the changes using the following command:

gcloud app deploy

If you face the above error, click on the link on the error and enable Cloud Build
API (you may have to enable billing).

Re-run the command gcloud app deploy again and it should get deployed and print the URL of the application.