Workspaces in monorepos offer a convenient way to organize and manage multiple projects within a single repository. They allow you to have separate workspaces for different types of projects, such as launchable apps and packages used by those apps or other packages.

‎

Hatched by

Dec 10, 2023

4 min read

0

Workspaces in monorepos offer a convenient way to organize and manage multiple projects within a single repository. They allow you to have separate workspaces for different types of projects, such as launchable apps and packages used by those apps or other packages.

In a monorepo, the apps folder typically contains workspaces for launchable apps built with frameworks like Next.js or Svelte. These workspaces are structured in a way that allows you to easily import them as normal packages.

On the other hand, the packages folder contains workspaces for packages that are used either by the apps or by other packages within the monorepo. This separation helps maintain a clear and organized structure for your projects.

When you run an install command from the root of your monorepo, several things happen. First, the workspace dependencies you have already installed are checked. Then, any workspaces that are part of your monorepo are symlinked into the node_modules folder. This means that you can import them just like any other package.

Additionally, other packages that are not part of your monorepo are downloaded and installed into the node_modules folder. This ensures that all the necessary dependencies are available for your projects to run smoothly.

However, it's important to note that whenever you add or remove workspaces, or change their locations on the filesystem, you will need to re-run the install command from the root of your monorepo. This is necessary to set up your workspaces again and update the symlinked packages in the node_modules folder.

It's worth mentioning that you don't need to re-install everything every time you make changes to your source code within a package. Re-installing is only required when you modify the locations or configurations of your workspaces in some way.

If you encounter any issues with your workspaces, such as incorrect dependencies or missing packages, it may be necessary to delete each node_modules folder in your repository and re-run the install command. This will ensure a clean and correct setup for your workspaces.

In a separate topic, the behavior of the "maxlength" attribute in input elements of type "number" in Chrome may be surprising to some developers. According to the documentation on <input> from MDN, the "maxlength" attribute specifies the maximum number of characters that a user can enter for input types like text, email, search, password, tel, or URL. However, for input type "number," this attribute is ignored by design.

This means that if you set the "maxlength" attribute on an input element with type "number" in Chrome, it will have no effect on limiting the number of characters a user can enter. This behavior is intentional and consistent with the HTML specification.

Now that we have explored both workspaces in monorepos and the behavior of the "maxlength" attribute in Chrome, let's discuss some actionable advice to enhance your development process:

  1. When working with monorepos and managing workspaces, make sure to re-run the install command whenever you add, remove, or modify the locations of your workspaces. This will ensure that your workspaces are properly set up and any changes are reflected in the symlinked packages.

  2. If you encounter issues with your workspaces, such as incorrect dependencies or missing packages, consider deleting the node_modules folders in your repository and re-running the install command. This can help resolve any conflicts or inconsistencies in your workspace setup.

  3. When developing forms in Chrome and using input elements of type "number," remember that the "maxlength" attribute will be ignored. If you need to limit the number of characters a user can enter, consider using JavaScript validation or other alternative methods.

In conclusion, workspaces in monorepos provide a convenient way to organize and manage multiple projects within a single repository. By understanding how to set up and manage your workspaces effectively, you can streamline your development process and improve collaboration within your team.

Additionally, being aware of the behavior of input elements of type "number" in Chrome and the limitations of the "maxlength" attribute can help you avoid unexpected issues when developing forms. By utilizing alternative methods to limit user input, you can ensure a smooth and consistent user experience.

By following the actionable advice provided, you can optimize your workflow in monorepo environments and avoid potential pitfalls when working with input elements of type "number" in Chrome. Happy coding!

Sources

← Back to Library

Hatch New Ideas with Glasp AI 🐣

Glasp AI allows you to hatch new ideas based on your curated content. Let's curate and create with Glasp AI :)

Start Hatching 🐣