Setting up Development Environment

A little trip down memory lane 😅: while I was working on my final-year project (DMS) at university, I had to do a lot of research to make it a success.

My project falls under the software development domain, and I adopted Agile, a software development methodology. So, I already have the design and theoretical aspects — functional requirements, non-functional requirements, interface design, etc. — figured out.

Since this is a rebuild, I'll focus primarily on the actual implementation rather than going deep into the theoretical aspects. I'll still share some surface-level theoretical posts where necessary. Without further ado, let's get to the main thing:

I decided to use a monorepo for my rebuild this time. Instead of having separate repositories for my frontend app, backend app, and shared types, I can keep everything under one repository and manage it using npm workspaces, a feature of npm that allows multiple packages to be managed within a single repository.

My setup looks something like this 👇🏽

I also get to centralize my development tools. For example, I can use the same TypeScript version across the entire project by installing it in the root package.json. If other people want to contribute to the project in the future, they only have to clone one repository instead of cloning two or three repositories to work on a single application.

This is my first time using a monorepo in a project, so I went with npm workspaces to reduce configuration overhead and keep everything lightweight. From my research, other package managers also have workspace/monorepo capabilities, with differences in dependency management, commands, performance characteristics, and features.

I also came across tools like Nx and Turborepo. They offer more advanced capabilities, but they seem technically demanding for me at the moment. Hopefully, I'll get to explore them in the future.

AI gave me this diagram as a simple mental model:

                MONOREPO
                   │
         ┌─────────┴─────────┐
         │                   │
   Package manager      Build/task tools
         │                   │
   ┌─────┼─────┐         ┌───┴────┐
   │     │     │         │        │
  npm   pnpm  Yarn      Nx    Turborepo