Seeking assistance with managing Yarn workspaces

My current project involves working on a React Native application for a client. After I had already written a significant amount of code, my client requested a new feature to be added. This feature should have been simple to implement, but due to the complexity of the existing codebase, it proved to be quite challenging. As a result, I made the decision to start from scratch in order to both improve my code structure and incorporate a new design idea I had envisioned. The only downside is that I now need to reinstall and set up all the necessary packages, which can be a tedious process, especially since additional configurations are needed within the android folder.
After conducting some research, I came across yarn workspace. Since I was already using yarn, I thought utilizing this tool would streamline the package installation process by managing them at the root level of the workspace. This also allowed me to set up ts-config and eslint configurations universally for all applications within the project, ensuring consistency throughout.
However, I encountered an issue as most resources I found focused on yarn workspace with react or react native, without incorporating TypeScript, which left me unsure about how to proceed, given my limited experience. My ultimate goal is to establish a structure within yarn workspace resembling:

task-manager-workspace-> the main workspace folder
  workspaces-> akin to the packages directory
     apps-> housing various versions of the application
        app-> the latest bare bones React Native app (non-Expo) with incorporated TypeScript
     common-> storing shared functionalities among apps with minimal differences
        core-> containing essential logic such as data handling
        views-> encompassing common components like headers and navigation bars

This comprehensive application should be fully TypeScript-oriented, integrate eslint (preferably configured by wcandillon), and adhere to prettier formatting guidelines. While I do not expect you to complete this setup for me, as a newcomer to workspace concepts, I seek guidance on how to successfully implement this intricate setup within yarn workspace.

typescriptreact-nativeeslintprettieryarn-workspaces

Answer №1

Essentially, the setup requires a separate package.json for every package in your project, including the main root package. Within the root directory's package.json, you should list all workspace packages like this:

{
  "workspaces": {
    "packages": [
      "common-core",
      "common-views",
      "apps-app1"
    ]
  }
}

You may also consider organizing the core and view packages under another overarching common package, though this arrangement is not confirmed. Each individual subdirectory containing a package will have its own standard package.json file, structured as follows:

{
  "name": "common-core",
  "private": true,
  "version": "1.0.0",
  "dependencies": {
    ...
  }
}

To add a dependency to one of the packages, use the following command:

yarn workspace common-core add <my-dependency>

This command, when executed from the project root, will add the specified dependency to the corresponding workspace package, potentially allowing for shared dependencies among multiple packages. It is possible to establish dependencies between workspaces, facilitating the efficient sharing of consistently updated code across various packages.

As for ts-config and eslint configurations, my knowledge on these matters is limited. Perhaps others can provide additional insights on this topic.

Remember that even if all packages are installed at the root level of your project, managing dependencies for each package individually (adding/removing dependencies as needed) remains essential.

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 correlation between methods in programming languages

Can a class or object be created with type constraints between methods? abstract class Example<T>{ abstract methodOne(): T abstract methodTwo (arg: T):any } I am looking to ensure that the argument of methodTwo is the same type as the return ty ...

typescriptgenerics

TypeScript in Angular causing lodash tree shaking failure

I am currently working on a large project that involves TypeScript. Various attempts have been made to optimize the use of lodash in my project. Before making any conclusions, I believe it is important to review the outcomes of my efforts. The command I ...

angulartypescriptlodashtree-shaking

Error in TypeScript when utilizing generic callbacks for varying event types

I'm currently working on developing a generic event handler that allows me to specify the event key, such as "pointermove", and have typescript automatically infer the event type, in this case PointerEvent. However, I am encountering an error when try ...

javascripttypescript

Guide to implementing ion-toggle for notifications with Ionic 2 and Angular 2

Currently, I am using a toggle icon to set the notification as active or inactive. The response is obtained from a GET call. In the GET call, the notification value is either 0 or 1, but in my TypeScript file, I am using noteValue as boolean, which means w ...

angulartypescriptionic2

Vue.js with TypeScript: The property 'xxx' is not found on the type 'never'

I have a computed method that I am trying to execute: get dronesFiltered(){ const filtered = this.drones.filter((drone) => { return drone.id.toString().indexOf(this.filterId) > -1 && drone.name.toLowerCase().toString().in ...

typescriptvue.js

Is there a way to use a single url in Angular for all routing purposes

My app's main page is accessed through this url: http://localhost:4200/ Every time the user clicks on a next button, a new screen is loaded with a different url pattern, examples of which are shown below: http://localhost:4200/screen/static/text/1/0 ...

htmlangulartypescript

Creating a loading spinner with the help of an rxjs BehaviorSubject

After creating a loading spinner component for my angular 4 application to display during AJAX calls, I encountered an issue when trying to implement it with a subscription to a BehaviorSubject. This question is similar to how to show a spinner until data ...

angulartypescriptrxjsangular2-observablesbehaviorsubject

Access the plugin object from a Vue.js 2 component using typescript

I devised a plugin object to handle the regular expressions used in my application in a more global manner. Here's an example of how it looks: import Vue from "vue"; Vue.prototype.$regex = { //isEmail function implementation goes here } ...

typescriptvue.jsvuejs2

Issue TS2339: The object does not have a property named 'includes'

There seems to be an issue that I am encountering: error TS2339: Property 'includes' does not exist on type '{}'. This error occurs when attempting to verify if a username is available or not. Interestingly, the functionality works ...

node.jsangulartypescriptfirebasepromise

Encountering issues while trying to start npx expo

While attempting to launch my react native project using Expo, I encountered an issue. After running the command npx expo start, I was greeted with the following error message: "Cannot determine which native SDK version your project uses because the modul ...

reactjsreact-nativeexpo

Using Angular 2 to convert and display data as a particular object type in

I have recently developed a basic application using the Angular2 tutorial as my guide. Initially, I established a straightforward "Book" model: /** * Definition of book model */ export class Book { public data; /** * Constructor for Book ...

angulartypescriptrxjs

Struggling with consolidating values in an array of objects - seeking assistance with Javascript

Currently, I am handling a project where I receive data in the form of an Object Array. My task is to merge values with the same key into one key and convert the values into an array of strings. Below is the sample data I am working with: inputArray = [ ...

javascripttypescript

Distinguishing between type assertion of a returned value and defining the return type of a function

What distinguishes between performing a type assertion on a function's return value and explicitly typing the return value in the function signature? Let's consider only simple functions with a single return statement. interface Foo { foo: numbe ...

typescripttypescript-typings

Having difficulty removing new or existing lines on StackBlitz

I attempted to experiment with React on StackBlitz, but I encountered a problem where I couldn't delete any lines of code. It seems that while I can add new lines of code, deleting them is not an option. Even when logging in with GitHub, the issue per ...

javascriptangularjsreactjstypescriptstackblitz

What is the best way to list the choices associated with a specific category?

The Node.js package I'm currently working with requires an argument of a specific type, which I can see is defined through a TypeScript declaration as follows: export declare type ArgType = 'A' | 'B' | 'C'; I am interes ...

javascriptnode.jstypescripttypes

Typescript error: The property 'set' is not found on type '{}'

Below is the code snippet from my store.tsx file: let store = {}; const globalStore = {}; globalStore.set = (key: string, value: string) => { store = { ...store, [key]: value }; } globalStore.get = (key) => { return store[key]; } export d ...

javascriptreactjstypescriptnext.js

What is the proper way to incorporate types in a universal function?

Encountering an issue with TypeScript while using a universal function export const createNewArray = <T>( arr: T[], keyId: keyof T, keyTitle: keyof T, ) : [] | TValue[] => { const arrayAfterMap = arr.map((item) => ({name: item[ ...

reactjstypescript

Error: The variable _ is undefined when trying to use the .map() function on an array

While working on my project, I encountered a "ReferenceError: _ is not defined" when using the .map function in this code snippet: arr.map(async (elem) => { ... }); I couldn't find any explicit mention of "_" in my code. The error trace pointed me ...

typescriptecmascript-6next.jslodashecmascript-5

Encountered an issue while trying to read the property 'temp' of undefined within an HTML document

Can someone help me with this issue? I'm facing an error with the JSON data retrieved from an API: ERROR in src/app/weather/weather.component.ts(39,30): error TS2339: Property 'main' does not exist on type 'Iweather[]' Here is ...

angulartypescript

Who is responsible for the addition of this wrapper to my code?

Issue with Sourcemaps in Angular 2 TypeScript App Currently, I am working on an Angular 2 app using TypeScript, and deploying it with the help of SystemJS and Gulp. The problem arises when I try to incorporate sourcemaps. When I use inline sourcemaps, eve ...

javascripttypescriptangulargulpsource-maps