What is the best way to enable code sharing between two TypeScript projects housed within the same repository?

Our project has the following structure:

api (dir)

-- package.json

-- tsconfig.json

-- src (dir)

-- client (dir)

---- package.json

---- tsconfig.json

---- src (dir)

The "client" directory houses a create-react-app project that proxies to the API during local development, which is why we have this particular directory structure.

We are looking for ways to share specific code (such as constants and utilities) between these two projects. We have tried various methods in TypeScript, like using multiple rootdirs, but haven't been successful.

Could you provide guidance on setting up code sharing between these two projects?

typescriptcreate-react-app

Answer №1

Here is my recommended project structure:

api
|- src
|- package.json
|- tsconfig.json
client
|- src
|- package.json
|- tsconfig.json
shared
|- src
   |- (place shared code here)
|- package.json
|- tsconfig.json
package.json
tsconfig.base.json (includes shared configuration options for all projects, such as strict mode)

You can then utilize yarn workspaces in your project to allow both projects to declare a dependency on the shared folder. Yarn will handle the dependency resolution among all three projects.

Remember to compile the code within the shared folder so that other projects can import it correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for VSCode to automatically generate callback method scaffolding for TypeScript?

When working in VS + C#, typing += to an event automatically generates the event handler method scaffolding with the correct argument/return types. In TypeScript, is it possible for VS Code to offer similar functionality? For instance, take a look at the ...

typescriptvisual-studio-code

Typescript's interface for key-value pairing with generic types

Consider the example Object below: let obj1: Obj = { 'key1': { default: 'hello', fn: (val:string) => val }, 'key2': { default: 123, fn: (val:number) => val }, // this should throw an error, because the types of d ...

typescriptgenericstype-inferencetypescript2.0typescript-generics

How can you obtain the user ID by verifying an email when using applyActionCode in Firebase 9 modular?

Is there a way to access the UID of an email verified user? Will the response provide any helpful insights, or should I handle this from another source? const handleVerifyEmail = (auth: any, actionCode: any) => { applyActionCode(auth, actionCode! ...

typescriptfirebase-authentication

Display a child element depending on a certain condition

Looking to implement a switch higher-order component (HOC) for conditional rendering that mimics a switch statement in ReactTS. <Switch> <Case condition={cond1}> Hello </Case> <Case condition={cond2}> Wor ...

reactjstypescriptreact-tsx

Navigating session discrepancies: Combining various social media platforms using Next.js and NextAuth

Recently, I ran into a problem where, upon logging in with Google, I found myself needing access tokens for Twitter and LinkedIn to send out API requests. The issue came about when NextAuth modified my session data to be from either Twitter or LinkedIn ins ...

typescriptnext.jsnext-auth

Initiate monitoring for child component modifications

I'm looking to disable 'changeDetection' for the parent component while enabling it for the child component. Can you provide an example of how this can be achieved? The parent component contains static data, meaning change detection is not ...

javascriptangulartypescript

Loading dynamic content within Angular Material tabs allows for a more customized and interactive user experience

I am currently working on creating a dynamic tab system using Angular Material: Tabs. I have encountered an issue with loading content on tabs after the initial one, where the functionality only works when the first tab is loaded. Below you can see the ta ...

angulartypescriptangular-materialangular-dynamic-components

Transition your Sequelize migrations to TypeORM

I'm currently in the process of transitioning a Node.js application from vanilla JS to Nest.js. In our previous setup, we used Sequelize as our ORM, but now we've decided to switch to TypeORM for its improved type safety. While exploring the Type ...

node.jstypescriptsequelize.jstypeorm

Troubleshooting the issue of React forms hook not functioning properly with Material UI Select input

How the Textfield below should load: How it actually loads: My Select component, created using Material UI and React form hook, is not loading the default value as expected. The component should start with a pre-selected value, which is provided in the c ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Swap out a collection of objects for a different collection of objects

I need to replace the content of array1 with the content of another array2 while keeping the same references and indexes in array1: let array1 = [ { book : { id : 2, authorId : 3} } , { book : { id : 3, authorId : 3} }, { book : { id : 4, authorId : ...

angulartypescript

How come the information I receive when I subscribe always seems to mysteriously disappear afterwards?

I've been working on a web project using Angular, and I've run into an issue with my code that's been causing problems for a while now. The problem lies in fetching data from a server that contains translations: getTranslations(): Observab ...

angulartypescript

What is the correct method for importing React in TypeScript (.tsx) to ensure optimal integration?

Within our TSX/React web application, we employ two distinct import styles for the react module: import * as React from "react"; as well as import React from "react" As far as I know, both methods function without any noticeable differences. Is there a ...

reactjstypescriptecmascript-6

typescript: tips for selecting a data type within an object

I need help extracting the type of the 'name' property from an object belonging to the Action interface. interface Action { type: string, payload: { name: string } } I attempted to use Pick<Action, "payload.name">, but it didn&apos ...

typescript

Integrating TypeScript into an established create-react-app project

Struggling to integrate TypeScript into an existing create-react-app? I've always added it at the beginning of a project using create-react-app my-app --scripts-version=react-scripts-ts, but that's not working this time. The only "solution" I co ...

javascriptreactjstypescript

How to safely add multiple objects to an array in TypeScript & React without replacing existing objects - Creating a Favorites list

I'm in the final stages of developing a weather application using TypeScipt and React. The last feature I need to implement is the ability for users to add queried locations to a favorites list, accessed through the "favorites" page. By clicking on a ...

javascriptarraysreactjstypescriptapi

Exploring the power of Vue CLI service in conjunction with TypeScript

I've recently set up a Vue project using the Vue CLI, but now I am looking to incorporate TypeScript into it. While exploring options, I came across this helpful guide. However, it suggests adding a Webpack configuration and replacing vue-cli-service ...

typescriptvue.jswebpackvue-cli

Is there a way to implement hover behavior for a Material-UI Button within a ButtonGroup component?

When using MUI v5, I am encountering an issue where the first button in the code provided is only half working. The button is initially colored red (both the border and text), however, upon hovering over it, the color of the border changes to blue. This is ...

cssreactjstypescriptmaterial-uiemotion

Ways to dynamically link a JSON response object to an entity?

In my ng2 implementation, I have a user.service.ts file that calls a REST service and returns JSON data. The code snippet below shows how the getUser function retrieves the user information: getUser(id: number): Promise<User> { return this.http. ...

javascriptangulartypescript

mongodb is experiencing issues with the findOneAndUpdate operation

Below is the code snippet for updating the database. let profileUrl = 'example' UserSchemaModel.findOneAndUpdate({_id:userId}, {$set: {profileUrl:profileUrl} }, {new:true}) .then((updatedUser:UserModel) => { console.log(updatedUser.profil ...

node.jsmongodbtypescriptmongoose

Deciphering the TypeScript type in question - tips and tricks

One of my abstract classes includes a static property with various properties, where default is consistently named while the others may have random names. public static data = { default: { //only this one always have 'dafault' name na ...

typescripttypes