Learn and first try on ChatCraft
Tags: opensource, ai, typescript, npm
Published: 2024-01-20 03:29:54

- #Learn [cloudflare pages](https://pages.cloudflare.com/) and [pnpm](https://pnpm.io/) which are used in [ChatCraft](https://github.com/tarasglek/chatcraft.org). 

- #Learn Review PR

- #Try to package and ship [typescript2openai](https://github.com/tarasglek/typescript2openai) on npm
&emsp;



##What is [Cloudflare](https://www.cloudflare.com/)
<img width="613" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/8f45ac35-1934-45f0-9c1e-b81046012ace">

Cloudflare is a global network of [servers](https://www.cloudflare.com/learning/cdn/glossary/edge-server/). When you add your application to Cloudflare, we use this network to sit in between requests and your [origin server](https://www.cloudflare.com/learning/cdn/glossary/origin-server/).
* speeding up content delivery and user experience(CDN)
* protecting your website from malicious activity ([ DDoSOpen](https://www.cloudflare.com/learning/ddos/what-is-a-ddos-attack/), [Web Application Firewall](https://www.cloudflare.com/learning/ddos/glossary/web-application-firewall-waf/))
* routing traffic ([Load balancing](https://developers.cloudflare.com/load-balancing/), [Waiting Room](https://developers.cloudflare.com/waiting-room/))


## Cloudflare pages - similar to [Heroku](https://www.heroku.com/), [Vercel](https://vercel.com/)
<img width="482" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/29ef1ed4-f916-47ca-abeb-3ee30ebef46e">
<img width="375" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/9d774e6a-9628-48f1-9e3d-44211ff2f0fc">


## How to deploy your website to the Pages platform
1. Connecting your [Git provider](https://developers.cloudflare.com/pages/get-started/guide/) to Pages.
1. Deploying your prebuilt assets right to Pages with [Direct Upload](https://developers.cloudflare.com/pages/get-started/direct-upload/).
1. Using [Wrangler](https://developers.cloudflare.com/workers/wrangler/commands/) from the command line


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/seqrk5posw70tlag69sd.png)



* [Wrangler](https://developers.cloudflare.com/workers/wrangler/) is a command-line tool for building with Cloudflare developer products.
* Use Wrangler to deploy projects that use the Workers Browser Rendering API.

## Using Cloudflare Pages in ChatCraft
<img width="613" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/0cd35530-5c7d-47fd-a2cf-9d9e6627c584">

<img width="717" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/7bb30a69-1791-4c84-b48f-a9292dc1acd3">

<img width="434" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/9d07e438-e4a3-44f1-b22a-91a5eb157326">


<img width="642" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/c61f431b-d321-4a56-879e-8b9cdf7e0017">

&emsp;
## What's [PNpM](https://pnpm.io/)
Fast, disk space efficient package manager
* Fast. Up to 2x faster than the alternatives (see [benchmark](https://github.com/pnpm/pnpm#benchmark)).
* Efficient. Files inside node_modules are linked from a single content-addressable storage.
* [Great for monorepos](https://pnpm.io/workspaces).
* Strict. A package can access only dependencies that are specified in its package.json.
* Deterministic. Has a lockfile called pnpm-lock.yaml.
* Works as a Node.js version manager. See [pnpm env use](https://pnpm.io/cli/env).
* Works everywhere. Supports Windows, Linux, and macOS.
* Battle-tested. Used in production by teams of [all sizes](https://pnpm.io/users) since 2016.
* [See the full feature comparison with npm and Yarn](https://pnpm.io/feature-comparison).
<img width="361" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/c9931842-b6a3-45ca-8b97-83d7a0d68f1b">
<img width="466" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/2e917845-315b-459a-939b-41ecd63d2f3a">


## Motivation
<img width="505" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/e8378f4f-bb92-4486-9748-b7ac94e1dbd6">

<img width="719" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/1d1281bc-1f79-43b9-9492-7314d6595b44">

<img width="715" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/e40fadf7-f560-4e2e-b865-ce76f9cceb1d">


## Installation
<img width="874" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/1e48a039-f7a0-41fc-b79a-4ff8c2d38f27">


## Using PNpM in ChatCraft
<img width="732" alt="image" src="https://github.com/humphd/osd700-winter-2024/assets/20795443/421162b3-f419-450e-868d-68f9382868b4">
&emsp;

## Reivew PR
I am acquainting myself with the review step and delving into the code of ChatCraft to enhance my understanding of its functionalities. I reviewed [Removed non-functioning code from README.sops.md](https://github.com/tarasglek/chatcraft.org/pull/348) and test small cases about [Add Latex Rendering with remark-math and Katex Plugins](https://github.com/tarasglek/chatcraft.org/pull/349)
&emsp;

## [Package and ship typescript2openai on npm](https://github.com/tarasglek/typescript2openai/pull/1)
In order to produce both ESM and CommonJS versions, as well as TypeScript types, I learned and tried [unbuild](https://github.com/unjs/unbuild) and used [complete example in unjs/template](https://github.com/unjs/template) package.json
```
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  },
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],
```
then I got all builds:
```
dist
├── index.cjs
├── index.d.cts
├── index.d.mts
├── index.d.ts
└── index.mjs
```
after run the test workflow, I got fail to install node, so I changed it to directly install pnpm [action-setup](https://github.com/pnpm/action-setup), at last it ran successfully, need to be reviewed and merged.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59buhd3y9hjgu5mrh1i4.png)