Empower Vue 2 with Cloudflare

I've worked with React and Next.js for a few years, but I miss using Vue.js 2 and Element UI together. The combination of Vue.js and Element UI made my development experience efficient and enjoyable.

I appreciate React's ability to break code into smaller pieces and Next.js's server-side rendering, but I miss the sense of workflow that Vue.js and Element UI provided.

I can focus on writing the logic and functionality of my application with Vue.js, as it's easy to understand. Element UI also provides a range of pre-built UI components that are visually appealing and easy to customize, saving me time and effort.

#Upgrade dependencies

I ran npm run install on my old frontend project, but instead of a smooth process, I got a ton of errors and scary security warnings. I was expecting it to be easy, but it was a big surprise. Now I have to update my dependencies to make sure they work with the new version of Node.js and fix all the security problems that built up over time.

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: eslint-plugin-vue@5.2.3
npm ERR! Found: eslint@6.8.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^6.0.1" from the root project
npm ERR!   peer eslint@">= 4.12.1" from babel-eslint@10.1.0
npm ERR!   node_modules/babel-eslint
npm ERR!     dev babel-eslint@"^10.0.1" from the root project
npm ERR!     babel-eslint@"^10.0.1" from @vue/cli-plugin-eslint@3.12.1
npm ERR!     node_modules/@vue/cli-plugin-eslint
npm ERR!       dev @vue/cli-plugin-eslint@"^3.7.0" from the root project
npm ERR!   2 more (eslint-loader, vue-eslint-parser)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@"^5.0.0" from eslint-plugin-vue@5.2.3
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^5.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint@5.16.0
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^5.0.0" from eslint-plugin-vue@5.2.3
npm ERR!   node_modules/eslint-plugin-vue
npm ERR!     dev eslint-plugin-vue@"^5.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

$ npm run serve

> felixfe@0.1.0 serve
> vue-cli-service serve
 INFO  Starting development server...
 error:0308010C:digital envelope routines::unsupported
    at iterateNormalLoaders (C:\artwork\felixfe\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (C:\artwork\felixfe\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (C:\artwork\felixfe\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at C:\artwork\felixfe\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at C:\artwork\felixfe\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3) {
  opensslErrorStack: [
    'error:03000086:digital envelope routines::initialization error',
    'error:0308010C:digital envelope routines::unsupported'
  ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v21.7.1

I had to update all the dependencies of my project that I rely on to make sure they worked well with the latest tools. This involved updating those parts and making a few small changes to my code to fit the new versions.

The link is my fixed package.json file

#Clean and Maintain Codebase

Simplify this many years old codebase by getting rid of code you're not using. This makes the code easier to understand and fix.

First I remove unused function class variable etc. Then delete unused Vue components and routes. The deleting and debugging process is time-consuming, but it's worth it to have a clean and maintainable codebase.

#Integrate Cloudflare Pages

After then npm run serve works well, I can start to integrate Cloudflare Pages and TypeScript into my project. Go to the cloudflare.com and create a new Pages, import my Github repository, and deploy it.

Git repository: mojocn/felixfe

• Build command: npm run build
• Build output: dist
• Root directory: empty
• Build comments: Enabled

#Add Cloudflare Workers Function

First create a new directory functions/api in the root of the project. Then create a new JavaScript file named meta.js in the functions/api directory.

export function onRequestGet(context) {
	return new Response("Hello, world!")
}

#Add TypeScript Support

First, you need to install the @cloudflare/workers-types package by running a single command in your terminal: npm install @cloudflare/workers-types. This package provides type definitions for the Cloudflare Workers API.

Next, you need to add a tsconfig.json file to the root directory of your Worker functions. This file is used to configure the TypeScript compiler and specify the options that should be used when compiling your TypeScript code.

Here is an example of what your tsconfig.json file could look like:

{
  "compilerOptions": {
	"target": "esnext",
	"module": "esnext",
	"lib": ["esnext"],
	"types": ["@cloudflare/workers-types"]
  }
}

I've successfully utilized the Cloudflare function, but I'm eager to take it to the next level by incorporating advanced features such as TypeScript for a database integration.

Then I create a new TypeScript file named users.ts in the functions/api directory. And Bind your D1 database to the Pages Function in Workers & Pages Settings.

import {D1Database, Env, PagesFunction} from "@cloudflare/workers-types";
interface Env {
	DB: D1Database;
}
export const onRequestGet: PagesFunction<Env> = async (context) => {
	const users = await context.env.DB.prepare("SELECT * FROM users").all();
	return new Response(JSON.stringify(users), {
		headers: {"Content-Type": "application/json"},
	});
};

Voila! I've successfully integrated TypeScript with Cloudflare Workers, enabling me to build powerful and scalable applications with ease.

#Config Cloudflare Domain

I've successfully integrated Cloudflare Workers with my Vue 2 project, but I want to take it a step further by configuring my domain with Cloudflare.

First i go to Cloudflare's console page and switch to Custom Domain, add a felixfe.mojotv.cn domain. Then I add a new CNAME record with the name felixfe in the DNS settings of my domain registrar.

All set! Now I can access my Vue 2 project with Cloudflare Workers by visiting.

---