Preconstruct for logger and automatic dev symlinks

[00:00 - 00:08] In the previous lesson, we added Preconstruct to our UI package. However, we have two other packages to look at.

[00:09 - 00:27] One is the config package, which only exports config files and doesn't need a build step, so we're not going to add it to Preconstruct. But the other is the logger package that a shared logger used in both our server and our Next.js app. Preconstruct should be added to the logger.

[00:28 - 00:46] The other thing that we should do is make the dev script execute automatically somehow, so we don't need to remember to run "preconstruct dev" after checking out the repository to get the Symlinked source files. We will start by first adding Preconstruct to the logger.

[00:47 - 01:05] I'm going to add @preconstruct/cli and @babel/preset-typescript as dev dependencies. I'm going to create a babel.config.json file, that only has @babel/preset-typescript as a preset.

[01:06 - 01:18] Then I'm going to open our package.json and that Preconstruct's config. And since we only have one entry point we don't need to specify multiple entry points.

[01:19 - 01:27] I'm just going to leave it to export from our src/index.ts File. I'm going to add the "dev" and "build" scripts.

[01:28 - 02:19] And I'm going to go down to the command line and run "pnpm preconstruct fix" then "pnpm preconstruct dev". And if I did everything correctly, we should have in our dist folder the symlink to our source file. And I should be able to go to our apps server express, run the dev server and see that we have the logger loading and changing the code of the logger does restart it, and we do have everything running as expected. I'm going to add my changes.

[02:20 - 02:35] We added our Babel config, we added the Preconstruct config scripts and updated exports and we just have pnpm lock changes. I'm going to commit this as "Add Preconstruct to packages/logger".

[02:36 - 02:50] Next I'm going to open root package.json and add a Preconstruct configuration here. The configuration lists which packages are handled by Preconstruct, and we're going to say all packages except for the config package.

[02:51 - 03:20] And we need to mimic the exact same experimental flags in here that we're using in all our packages. So whatever we have in here must be the same in our packages/ui/package.json as it is and the same in our packages/logger/package.json. Now that we have this, I'm going to add a "postinstall" script in here that's "preconstruct dev".

[03:21 - 03:39] So we're going to run "pnpm install" oh sorry, I forgot to add this as a dev dependency in in my root. So I need "pnpm add --D -w @preconstruct/[email protected]".

[03:40 - 04:12] Now "pnpm install", as we can see, adds a post-install script that runs on all packages and creates the symlinks for all packages. So now with every install, Preconstruct is going to create the symlinks, and we don't need to do anything else to get our dev servers to work in our applications.

[04:13 - 04:35] Let me add this. In our package.json we added the "preconstruct dev" "postinstall" script. We added the Preconstruct configuration in the root of our repo and we have package lock changes. I'm going to name this "Run preconstruct dev on pnpm install".

[04:36 - 04:47] The last thing we want to add is a Lefthook check. So I'm going to open my lefthook.yml file, go to our root commands.

[04:48 - 05:09] I'm going to add a new command to be executed on pre-commit that's going to validate the Monorepo with Preconstruct. What does "preconstruct validate" do? It will go to all packages that are managed by Preconstruct and validate that the configuration is correct.

[05:10 - 05:28] So "git add -p". We have our new validation script in our root and we're going to validate Preconstruct configuration on commit. We can see it here that it runs correctly.

[05:29 - 05:41] So now we have assurance that when we add new packages or change configuration, Preconstruct is going to continue to behave correctly. That's everything for this lesson and I'll see you in the next one.