Guidelines for Effectively Sharing and Managing Typescript Types in Large-Scale Projects across Frontend and Backend

My MERN project has a unique folder structure that includes:

backend, which consists of an express mongo backend with the following layout.

frontend containing 3 vite react projects, each with their own specific folder setup.

Parent Folder:
- backend
    - src
        - controllers 
        - middlewares
        - models
        - schemas
        - types
        - utils
        - app.ts
        - package.json
    - tsconfig.json
- frontend
    - client (vite app)
        - src
            - assets
            - components
            - hooks
            - pages
            - screens
            - types
        - index.html
        - package.json
        - tsconfig.json
    - master (same as client)
    - manager (same as client)

In my current setup, I have included a Types folder in each of the mentioned folders:

backend,

frontend/client,

frontend/master,

frontend/manager

When changes are made to a type in one location, I manually update it in all 4 folders to keep them consistent. This process can be tedious and error-prone, especially when types change frequently.

Moving forward, my question is:

I am looking for a solution to declare these types globally in the Parent Folder so that they can be accessed across all backend and frontend locations.

The main types I want to make global are database document schemas that are commonly used throughout the project.

Currently, managing types involves manual copying and pasting, which poses challenges with frequent updates.

Is there a more efficient way to handle this situation?

Answer №1

Implementing a monorepo structure, along with specialized tools for overseeing a unified codebase, is an efficient approach. NX Dev is a prime illustration of a platform tailored for managing monorepos.

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

The JavaScript function triggers a rearrangement of every element on the webpage

The webpage includes a bottom bar styled with CSS: #bottom_nav { position: absolute; bottom: 0; left: 0; border-top: solid 1px lightgray; background: url('http://localhost:3000/assets/font-try.jpg'); height: 70px; wid ...

Utilize Angular2 with ES6 modules while running an Express server

Having some issues using ES6 Modules with Angular2 in an app served by Node.js and Express.js. When attempting to load the Angular2/ES6 app in browser, encountered this error message in the FireFox console: The stylesheet http://localhost:8080/boot.css w ...

Execute the JQUERY keyup function only if the mouse is not currently hovering over the input field

I'm struggling with the keyup function issue. My ordering form contains a certain number of items, some of which are grouped as follows: Item 1 - Group1 Item 2 - Group1 The grouped items have two input fields each, one hidden and one visible. I am ...

No specific URL endpoint call involved

http://example.co/?method=get&search=hours&type=place&place_id=1&format=json is the URL I use to make an API call. The response file has no extension and is in JSON format, like this: [ { "hours": { "monday": { "open_ti ...

Transfer data via ajax to the controller

I need assistance with storing a file in my database using Tabulator without having a form already created. I am currently creating a simple input element like this: var editor = document.createElement("input");. After clicking the file, it trigg ...

Extracting Ajax data - iterating through each piece of information

I am facing an issue with my ajax code. I have a collection of checkboxes, where the goal is to insert the data from the selected checkboxes into the database. When I choose just one checkbox, the insertion works fine. However, if I select multiple checkb ...

What's the reason for Webstorm's Angular (TSLINT) alert when the attribute "_id" is defined in the model?

Currently I am working on a MEAN app, where I aim to define the user "_id" in my model as per MongoDB/Mongoose standards. I wish for properties like "id" to be as transparent as possible, however there seems to be an issue." According to tslint, variable ...

Enhancing websites with CSS3 and VueJS for fluid and captivating background gradients transitions

After implementing a logic in the application, the gradient is now changing dynamically. <template> <div :style="`background-image: ${backgroundImage}`" class="background"> <snackbar /> <nuxt /> <default-footer /&g ...

Callbacks are never fired in SQL Server because of the tedious connection

I have successfully connected to a SQL Server instance hosted in Azure through DBeaver and can browse all the data. After installing tedious with the following commands: npm install tedious npm install @types/tedious This is the exact code I am using: im ...

Spin: twist beyond 360 degrees or less than 0 degrees

Attempting to rotate an arrow indicating wind direction using the transform: rotate() property. The data for rotation is retrieved from an API fetch, and conventional measurement of wind direction involves indicating where the wind is coming from. Therefo ...

Searching for documents in MongoDB using a reference field

I'm working with two Mongo schemas: User: { _id: ObjectId, name: String, country: ObjectId // Reference to schema Country } Country: { _id: ObjectId, name: String } My goal is to retrieve all users who are from "VietNam". Could you provi ...

Updating the total in the OpenCart cart dynamically using AJAX functionality

I am currently working on integrating a shopping cart into the header of my website so that it updates the price and number of items in real-time when an item is added to the cart. Here is the HTML code I am using: <div id="cart"> <p class="phon ...

Ways to refresh ngOnInit in order to renew Interpolation

Is there a way to trigger a reset of ngOnInit() upon changing a variable? I am trying to reset ngOnInit() when the theme variable changes. Here is my code: Settings.ts export class SettingsPage implements OnInit{ phraseColor: string; ngOnInit() { ...

The clash between mototools and JavaScript is causing both to be non-operational

I am currently facing a conflict between JavaScript and Mototools in my project. I have heard about the NoConflict script, but I'm not sure how to implement it properly. I will provide the code for both dependencies so that someone can explain it to m ...

Type Error TS2322: Cannot assign type 'Object[]' to type '[Object]'

I'm facing an issue with a code snippet that looks like this: export class TagCloud { tags: [Tag]; locations: [Location]; constructor() { this.tags = new Array<Tag>(); this.locations = new Array<Location>(); ...

What would be the ideal labels for the parameters within Array.reduce?

When it comes to enhancing code readability, what naming convention should be employed when naming callback arguments in Array.reduce for optimal best practices? const studentAges= [15,16,14,15,14,20] Generalized Approach const sum = studentAges.reduce ...

Can Google Maps markers be transformed into checkboxes for use?

Is there a way to use Google Maps as a multiple locations picker, where users can select map markers and submit them through a form? ...

"Enhancing User Authentication with Firebase Email Verification in React Native

Does Firebase have a feature that allows me to verify if an email confirmation has already been sent to a user? I am able to check validation, but I need to determine whether the verification email has already been sent in order to decide if it needs to be ...

Repeated data submissions occur when using a modal form

I have a dataTable List with buttons attached to each row as shown below: https://i.sstatic.net/9vujB.png When a button is clicked, a Modal form is displayed. The modal is uniquely generated for each row in the table and has a different ID. https://i.ss ...

Synchronous user input within an asynchronous function

I'm currently facing a challenge with implementing a synchronous user prompt in my electron app. Specifically, I have an object that contains a series of commands and template variables. My objective is to substitute all unknown template variables wi ...