[SOLVED] How do I integrate typescript functions with a React Vite application?

All the templates under https://github.com/appwrite/templates/tree/main/node-typescript/ feature standalone Node.js applications for functions. However more frequently functions are a part of a larger application that involves a client-side part written in React.

Say I have a used the npm create vite@latest command to create a new Vite application with React and Typescript. How then can I have a separate folder for functions with functions in Typescript and then have Appwrite functions pointed to that repo? See the desired directory structure attached.

So far I'm getting an error from Appwrite which, it seems, doesn't know how to work with Typescript out of the box.

TL;DR

Summary: The user wants to integrate TypeScript functions with a React Vite application. They are concerned about mixing client-side code with server-side code and are looking for solutions. One possible solution is to transpile the TypeScript code to JavaScript using `tsc` during the build process. Another solution is to create a separate repository for the functions and include it as a dependency in the main React app. The user has tried both approaches and is currently working with the second one. They also mention using Python for server-side code. There is no clear solution provided for server-side rendering (SSR).

Make Sure You have the following setting:

How then can I have a separate folder for functions with functions in Typescript and then have Appwrite functions pointed to that repo? See the desired directory structure attached. I think you need to have different repo for the functions as if you keep the same repo, for any pull request not related to your function, it would start rebuilding itself

But for me, it's imperative to have functions together with my React app. E.g. Next.js can do it with Vercel.

Rebuilding functions doesn't take a lot of time so it's not a problem.

I don't have any ./dist/main.js emitted though.

Appwrite Function is not a hosting provider

like vercel

You might want to check https://appwrite.io/docs/products/functions/development

My question is: how do I make Appwork functions work with a React application format.

The official resources like docs or templates don't cover this subject.

By simple http request or by using api

https://appwrite.io/docs/references/cloud/client-web/functions

ChatGPT says I can create a separate tsconfig.server.json file and point it to the location of my server-side functions only. Then in package.json I have a script:

TypeScript

    "build:client": "vite build --config vite.config.ts",
    "build:server": "tsc -p tsconfig.server.json",
    "build": "npm run build:client && npm run build:server",
    "start": "node dist/functions/sync-pinecone.js",
    "dev": "vite"

Can it work?

If I understand well, you mean how to share types between your react vite app and appwrite functions?

Yes, and in doing so to avoid two separate projects - that is, a single project in a single repo holds code for the frontend and for the functions.

I have tried two solution, and currently I'm working with the second one:

The first one:

I put my types inside of the react folder and inside the functions

ROOT --| -- viteApp -----| -- types.ts -----| -- functions ---------| -- function_1 ---------| -- function_2

In this scenario, you need to have a tsconfig on each function pointing to your type file, and I needed a script to fix imports after compile

The second one:

Create a repo to share my types, I even share all functions used in my react app and the functions, I have called the helper repo and the I have included as dependency to the repo I want to use. As my function are connected to github, I just need to update the function dependency to be up to date, same with the react app. I'm using bun in functions so I don't even need compiled files in functions.

If you need more information for any of the two approach just let me know

I ended up going with Python after all 🙂 seems like there's no way around creating a completely isolated project for functions, as the server side is a different environment from the client side. And Python I find more convenient to develop server-side code

Good to hear you solved your problem, server side isn't totally solved yet, 1.5 will get solution for SSR.

can I close this issue?

I would avoid putting my functions with my client side code in case things get mixed up and some of my code ends up in the client build. (Theoretically, tree shaking should prevent this but 🤷🏼‍♂️ )

If you're using a node runtime, TypeScript won't work because Node doesn't understand TypeScript. That said, you can run tsc as part of the build in order to transpile your code to javascript, which node understands.

For sharing code, you can also use symlinks to include some of your types in your server function.