DEV Community: Ha Tuan Em

How to install Apache in macOS M1 - Montery 12.x.x

Ha Tuan Em — Mon, 28 Feb 2022 14:44:26 +0000

This post is usefull for Macbook M1 and macOS is Montery 12.x.x, so you need to double check what is your chip to make sure everything you do is right.

At the moment, Macbook is removed PHP in macOS Montery. That's mean we can run the application is run LAMP Stack. We need to backup this case. I found a lot case why and how we can change this.
To cover this case, I use the httpd package of homebrew. I will show you we can do now.

1. Stop Apache in macOS

I used httpd in this case, so I need to turn off apache and log errors.

sudo apachectl stop
sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null

2. Install `homebrew` tool to download and setup package referece.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Install httpd

Since homebrew has installed successfully. We need to install this package that is main package to run all Apache services in macOS 12.

brew install httpd

After installed httpd, we need to start this service and make sure your httpd has ran, we are typing http://localhost:8080 and when you see the test It's work that mean httpd is installed and ran successfully.

brew services start httpd

4. Install PHP

PHP doesn't support in macOS M1, we to download and install PHP in local machine. In this case I use php@7.4.

brew install php@7.4

Start the httpd service when you installed successfully.

brew services start php

Then you run command php -v in the terminal if you see the messeage same same like that. You are installed php success.

❯ php -v
PHP 7.4.28 (cli) (built: Feb 17 2022 16:38:06) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.28, Copyright (c), by Zend Technologies

If you command php not found, you should correct the path to PHP bin is existed. Or not you can add this command bellow .zshrc file or bash file.

❯ ~/.zshrc
export PATH="/opt/homebrew/opt/php@7.4/bin:$PATH"
export PATH="/opt/homebrew/opt/php@7.4/sbin:$PATH"

5. Now, try to test php with database.

I use Moodle framework in this case. Because it's fast and easily to setup.

After framework downloaded, we need to move the folder of source to /opt/homebrew/var/www. You can run manually or use this command:

mv ~/Download/moodle /opt/homebrew/var/www

with

/opt/homebrew/var/www is path of directory that folder is contain the resource of applications.

6. Test local folder

Open browser and go to address http://localhost:8080/moodle - moodle is a folder in httpd root directory. You will see the list of files php - tree directory. That's mean you have to success setup httpd in macOS 12. And also we need to setup the php to run php application.

7. Setup php in httpd

Use the command:

nano /opt/homebrew/etc/httpd/httpd.conf

Press Ctrl + W and search LoadModule, then paste the path of php at last line of LoadModule section. In homebrew, this is default path to of php.

LoadModule php7_module /opt/homebrew/opt/php@7.4/lib/httpd/modules/libphp7.so

Final. Apache server

And also, we need to tell Apache server what files we need to run php module. We paste the code bellow the line code which setup php module.

<FilesMatch \.php$>
        SetHandler application/x-httpd-php
</FilesMatch>

Then press Ctrl + O and Enter, Ctrl + X to complete setup php in Apache.

Back to browser in section 6, go to http://localhost:8080/moodle, you will see the magic 😉.

And we done.

Thank for reading and see you in next post.

Have a nice day 😀

Deploy an express application to Vercel.com with Typescript

Ha Tuan Em — Wed, 29 Sep 2021 15:59:02 +0000

After a long time, I got have to find out the way to deploy an express application to Vercel.com with typescript language.

Following the steps below:

1. Creating new a repository in Github and clone it locally.

git clone <repository_url>

2. Initial project

npm init -y

3. Installing vercel cli to global

sudo npm install -g vercel

4. Login to Vercel

vercel login

5. Installing develop package to project

npm install typescript @types/express vercel

6. Install express package to build a server.

npm install express

7. Edit file package.json

  ...
  "scripts": {
    "start": "vercel dev",
    "deploy" : "vercel deploy --prod"
  },
  ...

8. Creating new folder /api in root source code.

mkdir api

/api is endpoint folder where to run your API in server Vercel. Make sure all files API are in there.
Example: I need api to say hello in URL : /api

touch /api/index.ts

import { Request, Response } from "express";

export default async (req: Request, res: Response) => {
  res.json({ message: "Hello guys. Welcome to Vercel" });
};

Example: I need API to list out all products in URL :/api/product.

touch /api/product/list/index.ts

import { Request, Response } from "express";

export default async (req: Request, res: Response) => {
  const { page, limit } = req.query;
  res.json({ message: "Product api has working", data: [page, limit] });
};

9. Running vercel develop in local.

npm run start

Choosing your options in command.

10. Testing api

/api/index.ts

curl -v http://localhost:3000/api
...
< HTTP/1.1 200 OK
< cache-control: public, max-age=0, must-revalidate
< server: Vercel
< x-vercel-id: dev1::dev1::82tm8-1632930383166-b3c4fa833b80
< x-vercel-cache: MISS
< content-type: application/json; charset=utf-8
< content-length: 43
< etag: W/"2b-LDdVVhhCtB0dbrHbCnaU+b5JYWc"
< date: Wed, 29 Sep 2021 15:46:23 GMT
< connection: close
<
* Closing connection 0
{"message":"Hello guys. Welcome to Vercel"}

/api/product/list/index.ts

curl -v http://localhost:3000/api/product/list\?page\=1\&\&limit\=10
...
< HTTP/1.1 200 OK
< cache-control: public, max-age=0, must-revalidate
< server: Vercel
< x-vercel-id: dev1::dev1::82tm8-1632930567830-9c12b64cada1
< x-vercel-cache: MISS
< content-type: application/json; charset=utf-8
< content-length: 55
< etag: W/"37-0GNlWDxglCghRUJj/oI+UYTMPqY"
< date: Wed, 29 Sep 2021 15:49:27 GMT
< connection: close
<
* Closing connection 0
{"message":"Product api has working","data":["1","10"]}

11. Deploy your application to Vercel.com

npm run deploy

Note: why the code of express is different? See this article Using Express.js with Vercel
Note: you can deploy your project to vercel without command npm run deploy. See this article Deploy Express.js app to Vercel

And we done. Hope this article will help something for you.

Enjoy your time 🪴

Thank you for reading. See you in next article.

Deleting duplicate value at the same column in table of sql

Ha Tuan Em — Tue, 31 Aug 2021 04:52:31 +0000

Sometime, the table has duplicate value as string, number or etc,... And we want to clean that data. But the data is dynamic so we can not hard code for all case of table.

fruits table

id	name
1	Orange 🍊
2	Apple 🍎
3	Orange 🍊
4	Pineapple🍍

In this case, we got have a simple sql like that:

DELETE
  FROM fruits a
 USING fruits b
 WHERE a.id > b.id
   AND a.name = b.name;

Result after excute query

id	name
1	Orange 🍊
2	Apple 🍎
4	Pineapple🍍

If several columns have the same names but the datatypes do not match, the NATURAL JOIN clause can be modified with the USING clause to specify the columns that should be used for an EQUIJOIN.

Find out USING in this article

Enjoy your time 🪴
Thanks for reading.

SQL - NOT REALLY LANGUAGE.

Ha Tuan Em — Sat, 31 Jul 2021 13:42:04 +0000

The SQL language 👨‍🚀

SQL is a tool for organizing, managing and retrieving data stored by a computer database. The original named by IBM was Structured English Query Language which we often call is SEQUEL. SQL - the shorten named by the Hawker Siddeley Aircraft Company of the United Kingdom after was a trademark owner. But somehow both them are correct.

SQL is a computer language that you can work with the database. In real life, you are often working with a special type of database and in SQL we are called it is the relational database.

The computer program that controls the database is called a database management system (DBMS).

When we use SQL to make request. The DBMS processes that request and retrieves the requested data and returns it to us. Whole this process we is called query - hence the name Structured Query Language.

----------------
  SQL Request 👨‍🚀 
  (Give me 🍎)
----------------
      | ^
      | | 🍎 Data
      v |
----------------
    DBMS 🏢
----------------
      | ^
      | | 🍎 Data
      v |
----------------
   Database
(Mysql, MSSQL,..)
     Store
🍓🍒🍎🍉🍑🍊🥭🍍🍌🍋🍈
🍏🍐🥝🍇🥥🍅🌶🍄🥕🍠🧅
----------------

Database Management System (DBMS) 🏢

SQL is used to control all the functions in DBMS. It's include many tools to process data in the database.

Data definition: allows a user define the structure and organization of the stored data and relations.
Data retrieval: allows a user or and application program retrieve stored data and use it from the database.
Data manipulation: allows a user or an application program to retrieve stored data from the database and use it.
Access control: used to restrict a user permission to protected data.
Data sharing: used to coordinate data sharing by the current users to make sure that changes at the same time will not impact another one.
Data integrity: used to defines integrity constraints in the database. Protected it from inconsistent updates or system failures.

Summary:

SQL is comprehensive language for controlling and interacting with the database management system.
SQL is not really a computer language like C++, C, Java,...
SQL is a database sublanguage.
SQL statements can be embedded into another language.
SQL is used to control all the functions in DBMS.
Enjoy your time 🪴

Thanks for reading.

DEPLOY NEXT.JS APP TO VERCEL

Ha Tuan Em — Fri, 09 Jul 2021 15:08:18 +0000

Someone want to me make a post for explain how to deploy NEXT.JS application to Vercel. Base on require of them I will make a post. Hope, it will help something to you.

I. Initial Next.js app or you can clone my shopping cart repository

create-next-app shopping-cart

II. After creating your application, commit them to Github.

git add .
git commit -m "Complete project"

III. Create project in Vercel

IV. Import project or you can search by name of repository.

V. Configure application

You can add env as MONGOURI or SERECTKEY, ... in box Environment Variables.
Override command of application in box Build and Output Settings

VI. Deploy and done

Enjoy your time 🪴

Thank you for reading.

Deploy Express.js app to Vercel

Ha Tuan Em — Sun, 04 Jul 2021 14:57:05 +0000

After research how to deploy Express.js app to Vercel. Finally, I found and got have an application has deployed to Vercel. It's take a lot of time from me but I am happy and hope this article will help something to you.

I. First of all, creating new Github repository and init new project nodejs.

II. Creating new project in `Vercel`

III. Installing package `express` to nodejs app.

IV. Creating and endpoint file `index.js` in root source.

V. Creating APIs in `./api` folder or you can rename anything which you like.

Here is an example for manage product from ./api/product.

VI. Testing before commit source to Github.

After testing is 👌. Commit them to git to see something awesome.

VII. Ready to serve in Vercel.

VIII. Something went wrong in Vercel.

Because Vercel just supports API from Framework JS as NEXT.JS, Nuxt.JS,... So if we develop a standalone application we need to configure or tell the server of Vercel how is it work by vercel.json file.

IX. Add new `vercel.json` file to root source.

Commit it to GitHub and make sure version is 2 - this is required from Vercel.

X. Done, enjoy your moment.

Thanks for reading.
And I hope something good to you.
Here is repository which use in this post.

XI. Or you can follow this tutorial in youtube.

REACT - setState Object

Ha Tuan Em — Wed, 21 Apr 2021 06:32:06 +0000

Sometimes, we need to use the React Hook to store the object rather than the single field. Here is example:

: PS/
Hope to help you with something.
Thanks

devnote

react

NextJS simple shopping cart

Ha Tuan Em — Sun, 14 Mar 2021 12:45:13 +0000

After a week of learning and working with Next.JS. I had to build a simple application using the topic is a shopping cart in e-commerce. A lot of different knowledge in the framework when I deep down to learn, because I tried to compare MERN and NEXT.JS. I knew it was wrong but I did. Anyone will do like that - bring the old things to a new house. Something is beautiful and something is stuff.

And something stuff which I got in this framework. One of them that is global windows variable is not ready in all the time - that means the client-side and server-side are in black and white.

That's why I need some third party:

js-cookie to manage the resource in client-side.
next-redux-wrapper to manage the state in the client-side.
redux and etc...

First of all

I need create the next application and add third party to project

create-next-app next-simple-shopping && cd next-simple-shopping

yarn add js-cookie next-redux-wrapper react-redux redux redux-devtools-extension redux-thunk

🍪 Setup the cookie to application

// ./libs/useCookie.js
import jsCookie from "js-cookie";

export function getCookie(key) {
  let result = [];
  if (key) {
    const localData = jsCookie.get(key);
    if (localData && localData.length > 0) {
      result = JSON.parse(localData);
    }
  }

  return result;
}

export function setCookie(key, value) {
  jsCookie.set(key, JSON.stringify(value));
}

// cookie ready to serve

🏡 Setup the redux to make the magic in the client side

Initial the store component in redux

// ./store/index.js
import { createStore, applyMiddleware, combineReducers } from "redux";
import { HYDRATE, createWrapper } from "next-redux-wrapper";
import thunkMiddleware from "redux-thunk";
import shopping from "./shopping/reducer";

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== "production") {
    const { composeWithDevTools } = require("redux-devtools-extension");
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const combinedReducer = combineReducers({
  shopping,
});

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state, // use previous state
      ...action.payload, // apply delta from hydration
    };
    return nextState;
  } else {
    return combinedReducer(state, action);
  }
};

const initStore = () => {
  return createStore(reducer, bindMiddleware([thunkMiddleware]));
};

export const wrapper = createWrapper(initStore);

Also, we need the `action` and `reducer` in the application, too.

Action of shopping cart

// ./libs/shopping/action.js
export const actionShopping = {
  ADD: "ADD",
  CLEAR: "CLEAR",
  FETCH: "FETCH",
};

export const addShopping = (product) => (dispatch) => {
  return dispatch({
    type: actionShopping.ADD,
    payload: {
      product: product,
      quantity: 1,
    },
  });
};

export const fetchShopping = () => (dispatch) => {
  return dispatch({
    type: actionShopping.FETCH,
  });
};

export const clearShopping = () => (dispatch) => {
  return dispatch({
    type: actionShopping.CLEAR,
  });
};

Reducer of shopping cart

// ./libs/shopping/reducer.js
import { getCookie, setCookie } from "../../libs/useCookie";
import { actionShopping } from "./action";
const CARD = "CARD";

const shopInitialState = {
  shopping: getCookie(CARD),
};

function clear() {
  let shoppings = [];
  setCookie(CARD, shoppings);
  return shoppings;
}

function removeShoppingCart(data) {
  let shoppings = shopInitialState.shopping;
  shoppings.filter((item) => item.product.id !== data.product.id);
  setCookie(CARD, shoppings);
  return shoppings;
}

function increment(data) {
  let shoppings = shopInitialState.shopping;
  let isExisted = shoppings.some((item) => item.product.id === data.product.id);
  if (isExisted) {
    shoppings.forEach((item) => {
      if (item.product.id === data.product.id) {
        item.quantity += 1;
      }
      return item;
    });
  }
  setCookie(CARD, shoppings);
  return shoppings;
}

function decrement(data) {
  let shoppings = shopInitialState.shopping;
  let isExisted = shoppings.some((item) => item.product.id === data.product.id);
  if (isExisted) {
    shoppings.forEach((item) => {
      if (item.product.id === data.product.id) {
        item.quantity -= 1;
      }
      return item;
    });
  }
  setCookie(CARD, shoppings);
  return shoppings;
}

function getShopping() {
  return getCookie(CARD);
}

function addShoppingCart(data) {
  let shoppings = shopInitialState.shopping;
  let isExisted = shoppings.some((item) => item.product.id === data.product.id);
  if (isExisted) {
    shoppings.forEach((item) => {
      if (item.product.id === data.product.id) {
        item.quantity += 1;
      }
      return item;
    });
  } else {
    shoppings.push(data);
  }
  setCookie(CARD, shoppings);
  return shoppings;
}

export default function reducer(state = shopInitialState, action) {
  const { type, payload } = action;

  switch (type) {
    case actionShopping.ADD:
      state = {
        shopping: addShoppingCart(payload),
      };
      return state;
    case actionShopping.CLEAR:
      state = {
        shopping: clear(),
      };
      return state;
    case actionShopping.FETCH:
    default:
      state = {
        shopping: getShopping(),
      };
      return state;
  }
}

Okay, the redux is ready to serve 🎂.

Making `two` `component` for easy manage the state in the client.

> Product component 🩳

// ./components/ProductItem.jsx
import React from "react";
import styles from "../styles/Home.module.css";
import Image from "next/image";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { addShopping } from "../store/shopping/action";

const ProductItem = (props) => {
  const {
    data: { id, name, price, image },
    addShopping,
  } = props;
  return (
    <div className={styles.card}>
      <Image src={image} alt={name} height="540" width="540" />
      <h3>{name}</h3>
      <p>{price}</p>
      <button onClick={() => addShopping(props.data)}>Add to card</button>
    </div>
  );
};

const mapDispatchTopProps = (dispatch) => {
  return {
    addShopping: bindActionCreators(addShopping, dispatch),
  };
};

export default connect(null, mapDispatchTopProps)(ProductItem);

> Shopping counter component 🛒

import React, { useEffect, useState } from "react";
import { fetchShopping, clearShopping } from "../store/shopping/action";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

const ShoppingCounter = ({ shopping, fetchShopping, clear }) => {
  useEffect(() => {
    fetchShopping();
  }, []);

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        textAlign: "right",
        marginBottom: "1rem",
      }}
    >
      <h2
        style={{
          padding: "1rem 1.5rem",
          right: "5%",
          top: "5%",
          position: "absolute",
          backgroundColor: "blue",
          color: "white",
          fontWeight: 200,
          borderRadius: "10px",
        }}
      >
        Counter <strong>{shopping}</strong>
        <button
          style={{
            borderRadius: "10px",
            border: "none",
            color: "white",
            background: "orange",
            marginLeft: "1rem",
            padding: "0.6rem 0.8rem",
            outline: "none",
            cursor: "pointer",
          }}
          onClick={clear}
          type="button"
        >
          Clear
        </button>
      </h2>
    </div>
  );
};

const mapStateToProps = (state) => {
  const data = state.shopping.shopping;
  const count =
    data.length &&
    data
      .map((item) => item.quantity)
      .reduce((item, current) => {
        return item + current;
      });
  return {
    shopping: count,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    fetchShopping: bindActionCreators(fetchShopping, dispatch),
    clear: bindActionCreators(clearShopping, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCounter);

Ops! Don't forget your data mock based on the path to index page

// ./pages/index.js
import { products } from "../mocks/data";
import ShoppingCounter from "../components/ShoppingCounter";
import ProductItem from "../components/ProductItem";
// ...
<ShoppingCounter />
<main className={styles.main}>
  <h1 className={styles.title}>Welcome to Next.js shopping 🩳!</h1>
  <div className={styles.grid}>
    {products &&
      products.map((product) => (
        <ProductItem key={product.id} data={product} />
      ))}
  </div>
</main>
//...

See the live demo simple-shopping-cart

Okay, let's try for yourself. That's is my dev note. Thanks for reading and see you in the next article.

Here is repository

NEXT.JS + pRE-Rendering on my own.

Ha Tuan Em — Sat, 23 Jan 2021 14:59:51 +0000

Pre-rendering

By default, Next.js use pre-render process for every page. That's mean Next.js framework generated HTML on the Server-Side instead of Client-Side as React.js library.
Each time generate HTML, this page is an associate with code Javascript necessary. Every request is load HTML then this Javascript code run and interactive fully, we named this process is hydration.

Static generation

HTML will be generated at the build time - npm run build and reuse every request. That's mean HTML has exist in the server and the framework doesn't need to generate HTML anymore.

Server-side rendering

HTML will be generated at the request of the browser or end user. That means HTML not exist in the server and the framework will generate HTML for every request from the browser.

What we can choose between Static Generation and Server-Side rendering?

Before we choose the method for the page. We must define the purpose keys of the page what we want. I recommend that is the data dependence. If the page has the content not change by the time. We must be using Static Generation and in the contrast we must be using Server-side rendering, a page has the content data changing time by time.
Static generation is recommended by NEXT.JS, because the page has created in the server and it's generated at one time and CDN - Content Delivery Network will send the content to request. That mean, the end user or the browser will see the content is faster generate HTML for every request.
It's so bad if the page can't pre-render before the time of the request. For many the reasons, the data changes time by time as the comment of the post, the quantity of product,... In this case, Sever-side rendering is a good choice.

Static generation with data and data.

Basically, the page has not required external data. Next.JS can generate HTML at the build time in production mode.
But if the page is dependent on other data as file systems, external API, the query of the database, Next.JS has supported generate HTML with external data.
Static Generation with Data is using getStaticProps. For a page export this function with async and named getStaticProps:
- getStaticProps will run at the build time.
- Function will fetch data into props properties for the page.

export default function ExamplePage({ props }) {
    return ( ... );
} 

export async function getStaticProps() {
   const data = await fetch('...');
   return {
       props: data
   }
}

getStaticProps only run at Server-side. That means this function never runs on the client-side. Never bundle code in the browser. Never the query database on the client-side. It's only run on server-side.
But this method has a cons. The content of the page never changes at the time of request with dynamic params of URL from the end-user or the browser then the content of the page can't apply for the request of the client. That is the reason we need to use the getStaticPaths function to resolve on dynamic params from URL.

export default function ExamplePage({ props }) {
    return ( ... );
}

export async function getStaticPaths() {
   return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } }
    ],
    fallback: true
  };
}

export async function getStaticProps(context) {
   const data = await fetch('...');
   return {
       props: { data }
   }
}

Server-side Rendering

export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}

Because getServerSideProps is called in every request, so the context params in function are always have data the from request which means fetch data is called for every request then the data is changing for time by time.
It's really great for dynamic data of content, but in the contrast, the TTFB - Time to first byte is lower getStaticProps. Because the server will compute the result for every request.

Client-side rendering.

When a page has purpose below, the client-side rendering should be used:
- A part of the page is static and not require other external data.
- When a page is loaded, fetch data will be Javascript client do and show them to component or part of the page.
- Using for dashboard or private page.

SWR

Is React hook of NextJS created. And they recommend we must be using this method to fetch other data in client-side.

Next.JS ON MY OWN.

Ha Tuan Em — Thu, 21 Jan 2021 16:21:55 +0000

NEXTJS is a powerful framework for developing web applications.

Source code is supper support for SEO.

Image component is a pillar in NextJS.

Support two methods for rendering pages.

Easy for optimizing the components.

React is the core library for developing applications.

RENDERING

Static Rendering

Render HTML at the build time - npm run build .
We can re-render the page before every request of the user.
It's useful for the page by content is not usually changing.
We can use this method on the page: product list, post list, introduction, about, contact, help or documents, etc,...
In this method, we have two functions that are the main method rendering on the page. + getStaticPaths -> render the URL for page. + getStaticProps -> render content of the page.
Two methods above it's should be used together on the same page.
If one of these methods does not appear, the error will show when we build the application.

Server-side Rendering

React flow is rendered HTML on the client-side. But in NextJS is different, the framework will render HTML in the server as ASP.NET CORE or MVC Web framework.
It's better than static-rendering because draw HTML from the server is way the SEO tracking and analytics for the website.
So this is a method useful for build page like the detail of product, post detail, some page we need to tracking from SEO.

CSS power support design.

CSS in NextJS works the same in other frameworks but in NEXTJS, that distributes in two methods are global CSS and component or plugin CSS.

Global CSS

Working base on the root page which they invoke into the whole page of the application.
When we want to use the CSS is global we must define the name of the file in styles folder in <name>.global.css .

Component or plugin CSS.

Working base on the component with name is defined <component>.module.css . - It's just working around the component, out of the scope of them it never works.

CSS in js

Also we can style the component or page.

<style jsx>
{ ... }
</style>

It's impossible for a single component, but I don't think it's useful for maintain the application later.

Image - super powerful component

The pillar in NextJS.
It's provider functions for optimizing image media in the page with the best support for SEO by lazy-loading by default. - We just need a config image source then we can enjoy the performance of the page.

Static file serving.

Root director of file in Nextjs is in public folder - ( ' / ' ). - Any file in there will be public in the internet. ## Environment Variables. - NextJS using a file .env.local in developing then they will cut all content into process.env of NODEJS. - It's provider the different environment variable with NEXT_prefix .

Fast refresh - I think anyone can know it.

Routing

By pages is the root directory for path, so any page and URL will be generated in there.
And the folders or files inside the pages folder are generated URL or route in the NEXT application.
Example:

pages/index.js
=> '/' - Home page
pages/products/index.js
=> /products/ - Products page
pages/products/[...all].product.js
=> /products/1234 - Product detail page of product id is 1234

Linking

Okay, NextJS allows the application to convert the page as a SPA and also provides a linking dynamic path, allowing dynamic linking between the parameters.
To access the React component's router object you can use useRouter or withRouter , the page use usually useRouter .

Dynamic Routes.

This is a more in-depth section on Routing in Nextjs, as mentioned that the routing architecture of Nextjs is slightly different from other frameworks. Here's how the router works.
Use brackets [params] to a page to use dynamic paths.

Example:
/pages/products/[id].js
The result that we get is {"id": 123} or {"id": "apple-juice"}

Of course, we can add more params to paths.

/pages/products/123?size=XL

The result is {"id": 123, "size": "XL"}

But avoid the case of overriding URL parameters.

/pages/products/123?id=apple-juice
The obtained result is {"id": "apple-juice"}

Take all params of paths with (...)
/pages/products/[...]

Retrieves all routes with double brackets ([[... product]]).
/pages/products/[[[...]]]

The result /pages/products/apple-juice/12.

This way the router will match the routes without params.

** Note that **

Nextjs favors routers with predefined dynamic routes like products/create.js over /products/123.
Static pages will be Automatic Static Optimization - meaning the page loads a method in rendering that allows the page to render without data, for these pages the query object is empty.

Dummy learn Javascript

Ha Tuan Em — Thu, 03 Dec 2020 13:31:14 +0000

VALUES, TYPES AND OPERATOR

The values, types or operators in JAVASCRIPT as well as other programming languages. Have types of data as String, Number, Boolean, Array, etc... Have operators as "+, -, *, /, %". But each programming language has its own specialties. JAVASCRIPT just like that. Something stuck, something crazy, or something awesome that you meet when learning Javascript. And that why I see its interesting programming language. Here are the things of what I find out from books, the internet,...

Infinity 🌌🌌🌌,
As it's meaning full. This is a special value in Javascript. When you do math operator with this value you will get the values in all the time are Infinity or NaN. I don't know what is that useful for? And I am advisable not to do calculations with this variable. Because the Infinity values are not necessary for use in practical applications. If that is not required.

Comparison string 🚗 in 👨 or 👨 in 🚗,
In the real project. We can compare two strings values with each other without any problem (maybe I said that). In that, the comparison order takes precedence from "a-zA-Z0-9" in descending order.

Don't trust me, press F12 and make some calculates.

"a" > "A" => ?
"Z" > "0" => ?
"A" > "0" => ?
"a" > 0 => ?

NaN values Not-A-Number 👽👾,

is a property of the global object or the global scope. NaN is a non-configurable, non-writable property. Even when this is not the case, avoid overriding it. And there are things of rules in NaN: number cannot be parsed parseInt("Tom Haland"), math operation where the result is not a number Math.sqrt(-100), operand of an argument is NaN 10 * NaN, Indeterminate form 0 * Infinity,

Empty values ☁,

null, undefiendthere are both special values in Javascript - sometimes you will see null in other programming language. But null in JS is different, that is object, don't trust me, checking typeof(null) === "object" you will see result make you amazing 😃😃😃. They are used for announcing an application variable that has not been declared or defined - like an owner who is away from home and of course we know whose home it is. By default, using null, undefiend is not too mandatory to use which type in a real project. just choose and use the type base on the design in your system.

Automatic type conversion 🚗=🚓,

Because Javascript is a form of dynamic programming languages. So the types of values from there also become more flexible to use. The values auto covert base on the right type value or left value or operator in whatever case. There are some rules:

Any value (i.e null, number, string) * 0 => 0, except undefined.
String + number => "String + number"
String - number => number
String * number => NaN
Boolean == 0 => true
Null == undefined => true
Null == 0 => false

Short-Circuiting of logical operator 👌🤦‍♂️🤷‍♂️,

this operator is logical of two different data types with the purpose of being able to handle data. For &&, || with each of them make different results.

"Tom" && "That is Tom" => "That is Tom"

The value starts from left to right side, if the value of left side is **truthy* type then the next value will be the result.

"Tom" || "Hill" => "Tom"

In this case, which value is **truthy*, then take that value to result.

Truethy not include: false, 0, -0, 0n, “”, null, undefined, NaN

Absolute comparison 👩‍⚖️,

Absolute comparison between two types of values. Because JS is a dynamic programming language should be a means of comparison for sure as the final result must be absolutely accurate.

===, an ambiguity method of salvation of value type.

And as before, we have seen that null == undefined => true, but when adding an = sign, everything goes in a different direction, null === undefined => false.

=== is a righteous Judge. Everything is right and wrong. Will not tolerate any public under the jurisdiction of Judge ==.

I hope it helps a little bit.
Thanks for reading my post.
Have a nice day!

Simple deploy typescript application to Heroku

Ha Tuan Em — Fri, 10 Apr 2020 03:53:24 +0000

Step 1. Making project root directory

mkdir simple-deploy-app-typescript-to-heroku

Step 2. Initialize your directory as a node project

cd simple-deploy-app-typescript-to-heroku
npm init -y // automatic create new file package.json

Step 3. Install required dependency using NPM

npm i @types/express @types/node express nodemon ts-node typescript

Express is used for making REST API easier.
Nodemon keeps the server running and swapping the latest code so we don't need to restart the server every time our update new code.
ts-node directly runs .ts node file.
typescript for type-script support to javascript.

Step 4. Configuring Typescript

tsc --init // automatic for create new file tsconfig.json

Then add new line below compilerOptions object.


"include" : [
    "src/**/*.ts"   /* Include every ts file in source folder */
],
"exclude" : [
    "node_modules"  /* exclude everything in  node_modules */
]

Step 5. Setting up server

Edit file package.json

"compilerOptions" : {
  //**/
},
"scripts": {
    "start": "ts-node src/config/server.ts",
    "dev": "nodemon -x ts-node src/config/server.ts"
},

Server script would live in src/config/server.ts

Create a new simple server with express now.

src/config/server.ts

import express from 'express';
const app = express()
const PORT : string|number = process.env.PORT || 5000;

app.use("*",(req, res) =>{
    res.send("<h1>Welcome to your simple server! Awesome right</h1>");
});

app.listen(PORT,() => console.log(`hosting @${PORT}`));

Testing for server is running as well, we run cmd npm run dev.

Step 6. Deploying to Heroku

Substep 1: Installing Heroku CLI

Substep 2: Logging in into Heroku

heroku login

Then we are going to a new windows browser for login to Heroku application.

Substep 3: Creating a heroku application in heroku

Substep 4: Creating a file Procfile for Heroku

Add a new line to file

web:ts-node/src/config/server.ts

Substep 5: Initializing our project into a git repo of Heroku

git init .
git add .
git commit -m "Initializing project"

Finally of substeps: Pushing code to Heroku

git push heroku master

I hope it helps a little bit for you.
Thanks for reading my post.
Have a nice day!

DEV Community: Ha Tuan Em

How to install Apache in macOS M1 - Montery 12.x.x

1. Stop Apache in macOS

2. Install homebrew tool to download and setup package referece.

3. Install httpd

4. Install PHP

5. Now, try to test php with database.

6. Test local folder

7. Setup php in httpd

Final. Apache server

Deploy an express application to Vercel.com with Typescript

1. Creating new a repository in Github and clone it locally.

2. Initial project

3. Installing vercel cli to global

4. Login to Vercel

5. Installing develop package to project

6. Install express package to build a server.

7. Edit file package.json

8. Creating new folder /api in root source code.

9. Running vercel develop in local.

10. Testing api

11. Deploy your application to Vercel.com

Deleting duplicate value at the same column in table of sql

SQL - NOT REALLY LANGUAGE.

The SQL language 👨‍🚀

Database Management System (DBMS) 🏢

Summary:

DEPLOY NEXT.JS APP TO VERCEL

I. Initial Next.js app or you can clone my shopping cart repository

II. After creating your application, commit them to Github.

III. Create project in Vercel

IV. Import project or you can search by name of repository.

V. Configure application

VI. Deploy and done

Deploy Express.js app to Vercel

I. First of all, creating new Github repository and init new project nodejs.

II. Creating new project in Vercel

III. Installing package express to nodejs app.

IV. Creating and endpoint file index.js in root source.

V. Creating APIs in ./api folder or you can rename anything which you like.

VI. Testing before commit source to Github.

VII. Ready to serve in Vercel.

VIII. Something went wrong in Vercel.

IX. Add new vercel.json file to root source.

X. Done, enjoy your moment.

XI. Or you can follow this tutorial in youtube.

REACT - setState Object

devnote

react

NextJS simple shopping cart

First of all

🍪 Setup the cookie to application

🏡 Setup the redux to make the magic in the client side

Initial the store component in redux

Also, we need the action and reducer in the application, too.

Action of shopping cart

Reducer of shopping cart

Okay, the redux is ready to serve 🎂.

Making two component for easy manage the state in the client.

> Product component 🩳

> Shopping counter component 🛒

Ops! Don't forget your data mock based on the path to index page

NEXT.JS + pRE-Rendering on my own.

Pre-rendering

Static generation

Server-side rendering

What we can choose between Static Generation and Server-Side rendering?

Static generation with data and data.

Server-side Rendering

Client-side rendering.

SWR

Next.JS ON MY OWN.

RENDERING

Static Rendering

Server-side Rendering

CSS power support design.

Global CSS

Component or plugin CSS.

CSS in js

Image - super powerful component

2. Install `homebrew` tool to download and setup package referece.

II. Creating new project in `Vercel`

III. Installing package `express` to nodejs app.

IV. Creating and endpoint file `index.js` in root source.

V. Creating APIs in `./api` folder or you can rename anything which you like.

IX. Add new `vercel.json` file to root source.

Also, we need the `action` and `reducer` in the application, too.

Making `two` `component` for easy manage the state in the client.