Project Setup

[00:00:00]
>> Mike North: Let's get started. So, first you're going to want to make sure that you have PNPM installed in this course. It's actually going to be important that you use this specific package manager. NPM and YARN also have kind of some similar capabilities, but we're going to be using some pnpm-specific concepts here, and so you'll need this.

[00:00:21]
You can either install it directly by clicking on this link here and following the installation instructions, or if you happen to have Volta installed, you can just run Volta install pnpm, and it will set it up globally for you. Remember, after, if you have to install Volta, here's how to do it.

[00:00:39]
And then after you complete this step, remember to close and reopen your browser. It sets up an environment variable for you and that will need to be read. Or if you're clever and you want to source your ZSHRC to load that variable, you can do that too, and that's pnpm.

[00:00:58]
Then you're going to want to check out the GitHub repo. Here's the name of the repo, It's Mike North ts monorepos v2. Then you'll want to enter the repo, install the dependencies, and the way you'll know things are working well is these three tasks should complete successfully. You should be able to build lint and test.

[00:01:24]
And then finally, if you want to test that the dev script works, this is going to start the backend, start the front end, and you should see a URL you can click on. You can test the API by hitting this endpoint, or you can load the UI and you should see something that looks like this.

[00:01:42]
>> Speaker 2: If you have a monorepo containing packages of several different languages like Ruby, Python and Java, how would you integrate those type of packages in a single repo?
>> Mike North: It's certainly possible to do that. I would at that point reach for a tool like Bazel, which is kind of a language agnostic build tool that produces hermetic build artifacts and is quite fast at building.

[00:02:13]
Bluntly, most of the languages you care about can work with Bazel, but that's kind of what I would work towards. You'd pick tooling like that that is suitable for Polyglot Monorepos. Now that you've set up the Workshop project, let's start it up and make sure that everything works.

[00:02:35]
The first thing you want to make sure you do is make sure you have PNPM installed and then it's at a relatively recent version. I'm on 10.12.1 you can run pnpm i to install all the packages, I already have them cached here, so you might see some spinning going on there as it pulls things down.

[00:02:57]
And then you can run pnpm build, you should see some sort of build output that looks like this. So build lint test should work. And then if you run pnpm dev and you go to the Workshop project, this is the UI endpoint, this is the API endpoint. So if you click the API endpoint, you'll see like localhost 3000 at the root.

[00:03:22]
I am not serving things, but if you go /api/seeds, you should see some JSON. And similarly, if you go to the ui, you should see some visual representation of, of that JSON bunch of data coming through that is just like. It's enough that we have a back end, front end, and something that's shared between them, and that is plenty sufficient for us to think about Monorepos.

[00:03:47]
So with that, let's talk a little bit about what's inside, what this project consists of. This is really important to do before you begin your Monorepo journey. And really what I mean is, if we're setting out on a journey to turn this single project, we only have a root package, JSON here, here's our source code, all this stuff.

[00:04:15]
We're going to begin a process that normally you would conduct in cycles, where you'd say, all right, I've got something that is a little bit too monolithic and I have reason, some reason to break things out, and I want to factor out a package. What is that package?

[00:04:33]
Can I identify things that are separable? This is the step. Before we even start talking about the Monorepo, you want to have an understanding of what are we dealing with here, what is logically separable in this app. I've done that work ahead of time because you're going to have to do this yourself in your own app.

[00:04:58]
But we have a fairly obvious case here where we've got some UI components in this Lib folder. We've got some svelte components and something like dealing with State in the svelte world. We're not gonna worry about the contents of this files for now. Then we've got a folder in Source called Server.

[00:05:20]
And if I look at those, we've got some express stuff like Cors, middleware for Express. We've got something called load data, which seems to be engaging with the file system in some way and loading a file. And then we've also got models, and these are just typescript interfaces that represent what is a seed packet, what is the data structure here?

[00:05:48]
Those are some good candidates here. So we've got our models, we've got our server, and in our server we have this express stuff as well as remember where I put it? This is important here. We have this folder called Data up here, which we're going to want to keep track of.

[00:06:05]
This is the source of truth for the data. So the back end just, oops, it's a huge file, more than 5,000 items. So the YAML VS code plugin is barking at me, and so that's really what this consists of. A data, some models, a UI and a server.

[00:06:24]
And that already gives us a good starting point for starting to peel some of this apart as well. We have this utilities thing, which is just some formatting stuff. Mostly this is used in the ui, I think exclusively it's used in the UI and converting an RGB color to like a CSS value for rgb.

[00:06:46]
So that's it. That's all this app consists of. Now we're going to begin the process of taking this package as it exists today and taking the smallest step we can to making this into a pnpm workspace. At the end of this step, we're going to be able to run the same tasks.

[00:07:09]
Build lint test. Just so we capture the starting point here, I can also run prettier to format things.
>> Mike North: I can run this check command, which it's type checking, which requires a special command in the svelte world as well. So you can think of them. I've got a bunch of commands here and they're all in the package JSON.

[00:07:38]
You know, we've got build lint test, some test variants here, Lint format. What we want is to see that we get most of these working, but in a world where we've restructured the way the code is in this project and we can sort of see that we've got a workspace but with only one package in it, then we're going to begin the process of factoring things out.