Don’t track that: Peer programming with AI to compile code at build

Up to this point my mighty Bedtime Checklist App has been using pre-compiled React components– stored in the project repo– in production.

These are based on components from the component library sub-repo. Instead of tracking the compiled files in the BCA repo, the components should instead be compiled at build time. No compiled components should live in any repo, for a few reasons:

1. Source of Truth: The source code (JSX/React) is easier to read, maintain, and review than compiled JS.
2. Smaller Repo: Compiled files are often large and change frequently, cluttering your repo and increasing its size.
3. Avoid Merge Conflicts: Storing build artifacts leads to unnecessary merge conflicts, since compiled files change on every build.
4. Consistency: Compiling at build time ensures all environments use the same build process and dependencies, reducing “works on my machine” issues.

I’m currently the only contributor to this repo, so 3 and 4 have a smaller impact on me, but as a best practice I prefer to adhere to those anyway.

I’ve been working with react components in this repo for over 6 months now, and up to this point I’ve gotten by with the compiled components. However, it does bother me seeing the compiled code in the repo, so I’m finally removing it. Besides, it’s fun to learn.

In the development build I’m using babel in a gulp script to compile jsx components as part of a gulp series command named cssJsx. This command is also utilized in the gulp WatchAll command, which is in turn triggered in the gulp allTheThings command. Then, that command is included with the node watch script in package.json.

That covers me for the development portion, no change needed there.

However, when it comes to the production build, what I would like is to ignore the compiled components in my version control and instead compile those at the production build.

At this point I enlisted GithubCopilot for assistance. I gave it the following prompt:

please ad the babel compilation to the start command

Which resulted in the following updated start script:

"start": "babel bca-react-component-library --extensions .jsx --out-dir public/js/dist/bca-react-component-library --copy-file && node bedtime-checklist.js"

I don’t every want to blindly trust copilot’s work, so I asked it to explain what each command in the script does:

please explain what each of the commands in this script do

That allowed me to identify that --copy-file was unecessary. That command copyies the other files in the source folders– primarily the .scss files– into the output folders. I am already compiling this with a separate process, so that is unneeded. Plus, it was not compiling them, just straight copy and pasting them.

So the updated start script became the following:

`"start": "babel bca-react-component-library --extensions .jsx --out-dir public/js/dist/bca-react-component-library && node bedtime-checklist.js"

When running npm start locally the runs the app on port 3000.

I’ve deployed the code to my production app but now the build is failing because babel is missing in production, despite it’s inclusion in the dependencies. More to follow on that!