Tech Corner

Tuesday, November 22, 2022

What's new in NextJS 13?

NextJS had released the latest version of its framework NextJS 13. There are so many changes can be obviously noticed. I summaries the changes in short notes.

Folder-based Routing in NextJS 13.

1. the pages folder had been removed and replaced with app folder for routing purpose.

2. use folder for file system routing.

3. use square bracket for dynamic routing [id].tsx http://www.mywebsite.com/{id}

4. use parenthesis to exclude the directories from routing. (excluding directory)

NextJS provide to turbo mode for fast app launching in the development machine with the following command

npx next dev --turbo

NextJS had reserved serveral file names in NextJS 13.

page.tsx
layout.tsx
loading.tsx
error.tsx
template.tsx
head.tsx

Update nextjs.config.js configure file to use new feature app folder instead of pages folder for file sytem routing

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: { appDir: true },
};

module.exports = nextConfig;

Update packages.json file to enable turbo mode in development

"scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Monday, August 1, 2022

A cool tool to test your web app performance in command line

you can use the following command to install this utility in your development manchine.

if you this package run globally

npm i autocannon -g

for the specific app only

npm i autocannon --save

To test the performance of the app that running in port 3000

autocannon http://localhost:3000

the execution outcome will be shown as below

for more specific information, you can visit the link below

https://github.com/mcollina/autocannon

Tuesday, July 5, 2022

How to enable CORS options in Apollo-Server-Micro?

According the Apollo Server documentation, the CORS option is not available in server configuration.

"Note that apollo-server-micro does not have a built-in way of setting CORS headers."

when we create a apollo server, we can't set the cors options in the configuration object.

import {ApolloServer} from 'apollo-server-micro';
import 'reflect-metadata';
import { buildSchema } from 'type-graphql';
import { PetsResolver } from '../../src/schema/pet.resolver';

const schema = await buildSchema({
  resolvers: [PetsResolver],
});


const server = new ApolloServer({
    schema,
    csrfPrevention: true,  // see below for more about this
    cache: "bounded",
});

As a result, we should encounter the following CORS policy issue

Access to fetch at 'http://localhost:3000/api/graphql' from origin 'https://studio.apollographql.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Since we can't add the cors option with the configruation object, we have to manually add those cors options in the handler function

export default async function handler(req:any, res:any){
    res.setHeader("Access-Control-Allow-Credentials", "true");
    res.setHeader(
        "Access-Control-Allow-Origin",
        "https://studio.apollographql.com"
    );
    res.setHeader(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, 
        Access-Control-Allow-Methods, Access-Control-Allow-Origin, 
        Access-Control-Allow-Credentials, Access-Control-Allow-Headers"
    );
    res.setHeader(
        "Access-Control-Allow-Methods",
        "POST, GET, PUT, PATCH, DELETE, OPTIONS, HEAD"
    );
    if (req.method === "OPTIONS") {
        res.end();
        return false;
    }

    await startServer;
    await server.createHandler({path:"/api/graphql"})(req, res);
}

Now the cross site access violation should be resolved and we can manipulate the query and mutation in the apollo-studio.

Monday, July 4, 2022

How to fix " ReferenceError: document is not defined" in Jest?

When I setup a test again the AppShell in Micro-Frontend Application Development, then I added the test command to the scripts section in the package.json

   "test": "jest"

now the scripts section should be shown as below.

 "scripts": {
    "dev": "tsc --watch --outDir dist",
    "build": "tsc --outDir dist",
    "lint": "eslint *.ts*",
    "storybook": "start-storybook",
    "test": "jest"
  },

However when i run the test with pnpm test, I encoutered the error in the following image.

"AppShell › renders

The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.

Consider using the "jsdom" test environment."

based on the suggestion, i added the environment tag jsdom to the test command, then the test run is succeed.

"scripts": {
    "dev": "tsc --watch --outDir dist",
    "build": "tsc --outDir dist",
    "lint": "eslint *.ts*",
    "storybook": "start-storybook",
    "test": "jest --env=jsdom"
  },

The successful test run is shown below.

How to access environment variable from Fastify server?

We can easy access the environment variable from the express server with help from dotenv library. we can just need to add this following line the Server.ts or Index.ts file, then we can access the environment variable.

require('dotenv').config();
 app.use(
    cors({
      origin: __prod__
        ? process.env.CORS_ORIGIN_PROD
        : process.env.CORS_ORIGIN_DEV,
      credentials: true
    })
  )

In the server, we can't not simply assign the JWT_SECRET that stored in the environment setting as we usually did in the express server. In the fastify server, we should create a Constant.ts file to store the code above, the we import the Constant.ts into Server.ts file.

require('dotenv').config();

export const DB_CONNECTION_STRING =
  process.env.DB_CONNECTION_STRING ||
  "mongodb://localhost:27017/password-manager";

export const CORS_ORIGIN = process.env.CORS_ORIGIN || "http://localhost:3000";

export const COOKIE_DOMAIN = process.env.COOKIE_DOMAIN || "localhost";

export const JWT_SECRET= process.env.JWT_SECRET || "jwt-secret-key";

Server.ts

import { JWT_SECRET } from "../constant";

 app.register(fastifyJwt, {
    secret: JWT_SECRET,
    cookie: {
        cookieName: "token",
        signed: false,
    },
    });

Monday, June 27, 2022

A cool tool (Windows Powertoys) to provide you quick access to application in windows environment

Usually we need to click on the Windows Start button to launch the menu, then we can search the application that we want the access.

Now Microsoft provide us cool toy call Windows Powertoys. we can use Powertoys Run to quickly find the application and launch it.

shortcut key: ALT + SPACE to activate the Powertoys Run

then we can type in the input box to find the application that we want to launch

you can download this toy from GitHub with the link below

https://github.com/microsoft/PowerToys/releases/tag/v0.59.1

ASP.Net MVC Web API vs .Net 6 Minimal API quick compare in a diagram

Microsoft introduced the Minimal API in .Net 6, which is a lightweight API development for web api

We can show two with difference in a diagram

we can easily spot the big difference is that there is no Controller component in the Minimal API.

As a result there will much more difference between Mininal API and MVC Web API

No support for filters: For example, no support for IAsyncAuthorizationFilter, IAsyncActionFilter, IAsyncExceptionFilter, IAsyncResultFilter, and IAsyncResourceFilter.
No support for model binding, i.e. IModelBinderProvider, IModelBinder. Support can be added with a custom binding shim.
- No support for binding from forms. This includes binding IFormFile. We plan to add support for IFormFile in the future.
No built-in support for validation, i.e. IModelValidator
No support for application parts or the application model. There's no way to apply or build your own conventions.
No built-in view rendering support. We recommend using Razor Pages for rendering views.
No support for JsonPatch
No support for OData
No support for ApiVersioning. See this issue for more details.

you can find out more information with this link Tutorial: Create a minimal web API with ASP.NET Core

Thursday, June 23, 2022

How to quickly set up a shared library for Micro-Frontend application?

When we start the Micro-Frontend application development. we can use Turborepo to setup the project by

executing the following command in the CMD window or Terminal in the VS Code.

npx create-turbo@latest

By default, the project will create a ui inside the packages folder for crosss project sharing.

if you want to create other sharing library or context project, then we just have to copy the entire ui folder and rename it to store (which is the state-management for the entire application). we can run the following command from the parent level of ui, which should packages folder.

cp -rf ui store

now open the package.json file inside the store folder to modify the following information.

remove all libraries in the dependenices section and unrelated libraries in the devdependencies section.

then add zutand for state management.

{
  "name": "ui",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "license": "MIT",
  "scripts": {
    "dev": "tsc --watch --outDir dist",
    "build": "tsc --outDir dist",
    "lint": "eslint *.ts*"
  },
  "devDependencies": {
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "eslint": "^7.32.0",
    "eslint-config-custom": "workspace:*",
    "react": "^18.1.0",
    "tsconfig": "workspace:*",
    "store": "workspace:*",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "@mantine/core": "^4.2.6",
    "@mantine/hooks": "^4.2.6",
    "react-router-dom": "^6.3.0"
  }
}

now the modified package.json should looks like the one below

{
  "name": "store",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "license": "MIT",
  "scripts": {
    "dev": "tsc --watch --outDir dist",
    "build": "tsc --outDir dist",
    "lint": "eslint *.ts*"
  },
  "devDependencies": {
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "eslint": "^7.32.0",
    "eslint-config-custom": "workspace:*",
    "react": "^18.1.0",
    "tsconfig": "workspace:*",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "zustand": "4.0.0-rc.1"
  }
}

You should run pnpm i to link all packages together. Now we should have a share Store acrosss all projects in our MFE application.

How to access Postgres Database host in the Docker?

it is very convenient to spin up a Postgres Database in the docker by composing a docker compose yaml file.

the following code will help us setup a Postgres Database in the Docker

version: '3.8'
services:
  twitter_postgres_db:
    image: debezium/postgres:13-alpine
    environment:
      - POSTGRES_DATABASE=twitter_db
      - POSTGRES_USER=twitter_dev
      - POSTGRES_PASSWORD=twitter_dev
    ports:
      - 6543:5432
    volumes:
      - twitter_db_data:/data/db
volumes:
  twitter_db_data:

I should be able to setup another container for the PgAdmin in the docker. Since I already install a Postgres PgAdmin instance in my desktop. I just want to access the Postgres Database from my local host.

Here is the step that we should follow to access the Postgres from local PgAdmin

1. Register the localhost Server

2. Fill the following information in the Register Server Window

Name: LocalHost
Host Name /Address: localhost
Port: 6543 (copied from the docker compose file)
Maintenance Database: twitter_db (copied from the docker compose file)
Username: twitter_dev (copied from the docker compose file)
Password: twitter_dev (copied from the docker compose file)

3. After I click on the save button, then you should be able to access the Twttier_db

Monday, December 6, 2021

How to restart the node server after the change in the typescript files in Node Express Server development?

usually we can use the following configuration in the Package.json file to run the node server with nodemon.

"start:dev": "nodemon --watch './**/*.ts' --exec ts-node src/index.ts"

how the above command will required additional configuration for the nodemon.

ts-node-dev will provide us much better experience since there is not setup configuration. we can simply execute the command below to start the node express server and any change is made the server will automatically recompile and restart.

 "dev": "ts-node-dev src/index.ts"

However you must install the ts-node-dev package to run the command

yarn add ts-node-dev

Thursday, December 2, 2021

how to delete all node_modules in the current directory?

when you have a specific folder to store all react projects, then there will be lots of spaces being occupied by the node_modules folder.

we can easily execute the following command to free up the space for any projects not currently working on.

E:\Code

FOR /d /r . %d in (node_modules) DO @IF EXIST "%d" rm -rf "%d"

Friday, November 12, 2021

how to enable .Net 6.0 hot reload in Visual Studio Code?

Hot Reload is a cool feature in .Net 6. we can easily enable this feature in Visual Studio Code with executing the following command

dotnet watch run

then we do not have to rerun the dotnet run to recompile the whole application to see the change immediatley.

Monday, October 4, 2021

10 best Nuget Package for .Net Developer

Most .NET Developer should love to integrate the following package in their .NET project developer.

xUnit & NUnit : pacakge for unit testing

Moq & NSubstitute: Mocking libaries for .Net testing

Polly: Provide rich features for policies handling

FluentAssertions: Provide rich features for Assertions

BenchmarkDotNet: Provider Performance trace

Serilog: Provide logging with full structure events

Autofixture & Bogus : Fake Data Generator

Scrutor: add scanning capabilities to the default Microsoft Extensions. (DependecyInjection DI Container)

Automapper:Object to Object mapper

Dapper & Entity Framework Core: Data Access framework: Dapper is simple and customable

MediatR & Brighter : CQRS stands for Command Query Responsibility Segregation libraries. MediatR is an in-process command dispatcher. Brighter is an out of process command dispatcher

FluentValidation: validation library using fluence interface and lamda expression for building validation rules

Refit & RestSharp: API tools. Refit is an automatic type-safe REST library for .Net. RestSharp is a simple REST and HTTP API Client for .Net.

Json.NET: handle json data

Friday, October 1, 2021

Immediate Git Commands

a list of handy git commands

# check the change of the file

git diff filename

# check in parital change of the file -p flag will show us the change in patch level

git add -p filename

# use git commit to enter the concise message

git commit

# use git log to check the commit history to ensure the change had been commit

git log

# create a branch

git branch test

# use the branch

git checkout test

# push the change back to the repository

git push --set-upstream origin test

# merge the change

git merge test

# undo the merge and rebase

git merge --abort

git rebase--abort

#use mergetool to perform the merge

git mergetool

Monday, September 13, 2021

How to fix "HTTP Error 404.0 - Not Found" in Kubernetes ingress-nginx services?

i had setup the kubernetes Ingress with ingress-nginx with the following code, in my local machine,

which will direct the traffic to the backend service in kubernetes

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-srv
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  rules:
    - host: acme.com
      http:
        paths:
          - path: /api/platforms
            pathType: Prefix
            backend:
              service:
                name: platformservice-clusterip-srv
                port:
                  number: 80
          - path: /api/c/platforms
            pathType: Prefix
            backend:
              service:
                name: commandservice-clusterip-srv
                port:
                  number: 80

after the setup is complete. i try to browse to the platform service web api which is hosted in the backend server.

http://acme.com/api/platforms/ but the error comes up immediately, which indicated that

The directory or file specified does not exist on the Web server.

since the directory was not hosted in the IIS, it had been deployed to the pods in the kuberentes

As we manipulate the kubernetes in the local environment, we can check what process is using the port 80

C:\code\dotnet-microservices\k8s>netstat -ano | findstr ":80" | findstr "LISTENING"

TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 4

TCP 0.0.0.0:8081 0.0.0.0:0 LISTENING 4

TCP [::]:80 [::]:0 LISTENING 4

TCP [::]:8081 [::]:0 LISTENING 4

the PID 4 represnet that the port 80 had been assigned to IIS local host. we should stop the World Wide Web Publishing Service, in order to release the port 80 for Kubernetes services.

after I stop the World Wide Web Publishing Service, the we can see that port 80 had been assigned to different processes.

C:\code\dotnet-microservices\k8s>netstat -ano | findstr ":80" | findstr "LISTENING"

TCP 0.0.0.0:80 0.0.0.0:0 LISTENING 3440

TCP [::]:80 [::]:0 LISTENING 3440

TCP [::1]:80 [::]:0 LISTENING 16096

Now we should be able to access the web api host in the kubernetes.

[{"id":1,"name":"dotnet","cost":"free","publisher":"Microsoft"},{"id":2,"name":"SQL Server Express","cost":"free","publisher":"Microsoft"},{"id":3,"name":"Kubernetes","cost":"free","publisher":"Cloud Native Computer Foundation"}]

Friday, September 10, 2021

how to fix "The SSL connection could not be established," in Web Api development with ASP.Net Core and .Net 5.0

I implemented two MicroServices in my local machine, I try to call one service from another with HttpClient. the error was shown as blew after the service call.

"cound not send data to commandservice with errror The SSL connection could not be established, see inner exception. System.Security.Authentication.AuthenticationException: The remote certificate is invalid because of errors in the certificate chain: UntrustedRoot at System.Net.Security.SslStream.SendAuthResetSignal(ProtocolToken message, ExceptionDispatchInfo exception)

at System.Net.Security.SslStream.ForceAuthenticationAsync[TIOAdapter](TIOAdapter adapter, Boolean receiveFirst, Byte[] reAuthenticationData, Boolean isApm)"

the error indicated that th SSL connection cannot be established due to certificate issue.

we can the use the following command to trust the self-singed certificate

dotnet dev-certs https --trust

for more information about this command you can check out the microsoft document website with the link below

https://docs.microsoft.com/en-us/dotnet/core/additional-tools/self-signed-certificates-guide

how to fix "Unable to connect to the server: dial tcp: lookup myaksclust-myresourcegroup-3f2c36-40a876eb.hcp.eastus.azmk8s.io: no such host" error?

when I try to check the version of Kubectl with kubectl version that is installed in my local desktop. i got the following error

"Unable to connect to the server: dial tcp: lookup myaksclust-myresourcegroup-3f2c36-40a876eb.hcp.eastus.azmk8s.io: no such host"

I check the kubectl configuration file with Kubectl config view

it shows with information below

apiVersion: v1

clusters:

- cluster:

certificate-authority-data: DATA+OMITTED

server: https://aks-cluste-aks-rg-3f2c36-a86fa58c.hcp.eastus.azmk8s.io:443

- cluster:

certificate-authority-data: DATA+OMITTED

server: https://kubernetes.docker.internal:6443

- cluster:

certificate-authority-data: DATA+OMITTED

server: https://kuar-clust-kuar-3f2c36-3176b3bf.hcp.eastus.azmk8s.io:443

- cluster:

certificate-authority: C:\Users\admin\.minikube\ca.crt

server: https://192.168.2.14:8443

- cluster:

certificate-authority-data: DATA+OMITTED

server: https://myaksclust-myresourcegroup-3f2c36-40a876eb.hcp.eastus.azmk8s.io:443

contexts:

- context:

cluster: aks-cluster

user: clusterUser_aks-rg_aks-cluster

- context:

cluster: docker-desktop

user: docker-desktop

- context:

cluster: kuar-cluster

user: clusterUser_kuar_kuar-cluster

- context:

cluster: minikube

user: minikube

- context:

cluster: myAKSCluster

user: clusterUser_myResourceGroup_myAKSCluster

current-context: myAKSCluster

kind: Config

preferences: {}

users:

- name: clusterUser_aks-rg_aks-cluster

user:

client-certificate-data: REDACTED

client-key-data: REDACTED

token: e4d785d3065d5697f03ac404ac27460f68b973b7185ea4697679077e39ff106437d3a7fe9c79f3be5cc84bbab6728e2d71bc010d0a6c6628bf05162958c122bb

- name: clusterUser_kuar_kuar-cluster

user:

client-certificate-data: REDACTED

client-key-data: REDACTED

token: afc713faf0d9c13f494711c3ab569d52c48c4ac1bef72f53329ab832247c0180f87a167d59c1a784ea0951bd11f043e8eb8aa6089caec2d9d71f61ea58d29b48

- name: clusterUser_myResourceGroup_myAKSCluster

user:

client-certificate-data: REDACTED

client-key-data: REDACTED

token: 2906f9edf219806a855010df4aa104f25eceea94ce748cf1b7813f3af93c531a60b853654b6bc0b24c448491ab3a5896ad36e0fa00d898507c44db7c69f8b283

- name: docker-desktop

user:

client-certificate-data: REDACTED

client-key-data: REDACTED

- name: minikube

user:

client-certificate: C:\Users\admin\.minikube\profiles\minikube\client.crt

client-key: C:\Users\admin\.minikube\profiles\minikube\client.key

we can see that the current-context is myAKSCluster, which is Azure Kubernetes Service. the error is sterm from that either authoriation token had been expired or the service instance had been removed from azure

Since we already know the root cause of the issue, we can change the kubectl context to the new AKS or the local docker-desktop.

we can follow the steps below

#to get all the context available in the kubectl configuration file

kubectl config get-contexts

CURRENT NAME CLUSTER AUTHINFO NAMESPACE

aks-cluster aks-cluster clusterUser_aks-rg_aks-cluster

docker-desktop docker-desktop docker-desktop

kuar-cluster kuar-cluster clusterUser_kuar_kuar-cluster

minikube minikube minikube

* myAKSCluster myAKSCluster clusterUser_myResourceGroup_myAKSCluster

#update the current context with local docker-desktop

kubectl config use-context docker-desktop

Monday, September 6, 2021

how to add a list of empty folders to github in windows environment?

When we setup the project structure in the development. the Github have prevent us to push all empty folder to the GitHub Repository in remote server. we can use gitkeep utility in the Macs and Linux environmen to create gitkeep for those blank folder. we cannot gitkeep in the Windows environment. but there is a work around. we can use the powershell scripts to loop through all subfolders under the current project folder and add .gitkeep file in each empty folder. then we can upload those folders to the server.

here is the code to be execute in the windows PowerShell ISE, you should copy it to your windows PowerSehll ISE and replace {Your Current Project Folder path} with your own folder path

Get-ChildItem '{Your Current Project Folder path}' -Recurse -Directory |

Where-Object {[System.IO.Directory]::GetFileSystemEntries($_.FullName).Count -eq 0} |

ForEach-Object { New-Item ($_.FullName + "\.gitkeep") -ItemType file}

Tuesday, August 31, 2021

how to fix the cookie is not saving in the browser storage when login mutation is called in GraphQL playground?

when I implemented the login function, I use the express-session to handle the refresh token. one copy will be save to MongoDB, another one will be save to the cookie. However, I tested the login mutation in the Apollo GraphQL playground. the cookie had been sent in the response header, but it never save in the browser.

the root cause of this issue is sterm from the playground setting.

by default "request.credentials": "omit", it should be "request.credentials": "include", to force the playground to save the cookie

here is the original setting of playground

{

"editor.cursorShape": "line",

"editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",

"editor.fontSize": 14,

"editor.reuseHeaders": true,

"editor.theme": "dark",

"general.betaUpdates": false,

"prettier.printWidth": 80,

"prettier.tabWidth": 2,

"prettier.useTabs": false,

"request.credentials": "omit",

"schema.disableComments": true,

"schema.polling.enable": true,

"schema.polling.endpointFilter": "*localhost*",

"schema.polling.interval": 2000,

"tracing.hideTracingResponse": true,

"queryPlan.hideQueryPlanResponse": true

}

the following is the updated configuration

{

"editor.cursorShape": "line",

"editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",

"editor.fontSize": 14,

"editor.reuseHeaders": true,

"editor.theme": "dark",

"general.betaUpdates": false,

"prettier.printWidth": 80,

"prettier.tabWidth": 2,

"prettier.useTabs": false,

"request.credentials": "include",

"schema.disableComments": true,

"schema.polling.enable": true,

"schema.polling.endpointFilter": "*localhost*",

"schema.polling.interval": 2000,

"tracing.hideTracingResponse": true,

"queryPlan.hideQueryPlanResponse": true

}

Tuesday, August 24, 2021

how to use Powershell to convert CSV file into Json format data?

there is a built-in function in powershell cmdlet, which will allow us to convert the csv data into json format data.

first we should go to the folder where is the csv file stored. my csv file is found in this folder

C:\code\django\django-search-app\fixtures

PS C:\code\django\django-search-app\fixtures> ls

Directory: C:\code\django\django-search-app\fixtures

Mode LastWriteTime Length Name

---- ------------- ------ ----

-a---- 8/24/2021 1:26 PM 872488 books.csv

-a---- 8/24/2021 1:35 PM 883612 books_title_author.csv

here is script to be run the in windows powershell and it should be executed inside the folder

PS C:\code\django\django-search-app\fixtures> $topicsjson = import-csv .\books_title_author.csv | ConvertTo-Json

PS C:\code\django\django-search-app\fixtures> $topicsjson | Add-Content -Path "myData.json"

$topicsjson = import-csv .\books_title_author.csv | ConvertTo-Json

$topicsjson | Add-Content -Path "myData.json"

after the scripts is executed.

there should be a json file name myData.json within the file.

PS C:\code\django\django-search-app\fixtures> ls

Directory: C:\code\django\django-search-app\fixtures

Mode LastWriteTime Length Name

---- ------------- ------ ----

-a---- 8/24/2021 1:26 PM 872488 books.csv

-a---- 8/24/2021 1:35 PM 883612 books_title_author.csv

-a---- 8/24/2021 1:40 PM 2047343 myData.json