metro VS nx

For details on the implementation you can see Evan's PR to metro here.

Some development tools for the web are similar (Chrome debugger, mostly) to those for React Native, but other aspects are very different (working with the metro bundler, using Flipper, AsyncStorage debugging, more). Some techniques developers will use are the same (breakpoints and console logging), but others are different (knowing when to restart the packager vs reinstall the app on device).

We’re almost done with setting up the project. The last thing in the React Native app is to add watchFolders so metro knows where the linked node_modules are. The shared modules are symlinked by yarn, and since metro doesn’t follow symlinks we need to explicitly say it where the linked node_modules are.

Unfortunately it is what it is... I use intellij instead of webstorm since they're the same thing basically. I spent a shitton of time figuring out how to link a local package i was creating for my app only to discover about this issue that is almost as old as react native itself. (luckily there's rnx-kit that solves the problem). Not to talk about the impossibility to have one goddamn IDE to write both typescript, java and c++. Currently i have to write ts/js in intellij, then i have to switch to android studio to write java/c++.

React Native doesn't play nicely with most monorepo tools out of the box as Metro doesn't support symlinking.

Because React Native for Web is a React website, you can use front-end tools to build and run it. For example, you can build it with Webpack or Rollup instead of Metro bundler.

Before we can run the app, we still need do one more thing: make metro bundler compatible with Yarn workspaces' hoisting.

Metro bundler is the JavaScript bundler currently used by React Native. One of metro's most famous limitations (and issue number #1 in its GitHub repository) is its inability to follow symlinks. Therefore, since all hoisted libraries (basically all libraries not specified in the nohoist list) are installed in mobile/node_modules as symlinks from /node_modules, metro won't be able to detect them. Additionally, because of this issue, metro won't even be able to resolve other workspaces (e.g., @my-app/app) since they're outside of the mobile directory.

Second, sharing code with other projects (e.g., backend code, web apps) may get complicated. Out-of-the-box, React Native's metro bundler cannot reference code outside of the project's root directory. You can configure it to do so (and we'll do it as well later on). Still, once you do it, you'll also need to ensure dependencies resolution works correctly (to avoid loading two different versions of the same library, for example); which might not be as easy as it may sound.

While it might appear that we can access all modules from the project’s root node_modules, the reality is that build processes sometimes aren't able to traverse symlinks. This problem is especially prominent in React Native apps, where both the metro bundler and the native code can't follow symlinks.

Hono does have a template application for Vercel, but in my case, my requirements were different (aren't they always 😅). I was working in a monorepo (using nx) because I wanted to manage my libs, tests, and examples all together in a single place, instead of having different repos.

Recently, My coworker is using Nx to automate his workflow, including automated release using semantic version. I found this method quite useful, so I want to re-implement on single GitHub repositories (without Nx).

Nx

We are looking for companies to partner with on the Analog project to support development of the project. Thanks to Snyder Technologies for being an early adopter and promoter of Analog, Nx for joining us as a sponsor, House of Angular, and many other backers of the project.

Additionally, thank you to all our community launch partners across the frontend ecosystem for helping us bring Storybook 8 to the world! Thanks to Chromatic, Figma, ViteConf, Omlet, DivRiots, story.to.design, StackBlitz, UXpin, Nx, Mock Service Worker, Anima, Zeplin, zeroheight, kickstartDS, and Kendo UI.

The advent of esbuild, the native support for ES Modules in browsers, the widespread adoption of import map, the emergence of tools like Native Federation, and the Nx ecosystem all combine to forge a flexible and well-maintained Micro Frontend Architecture.

Nx is a set of DevTools to make it simpler for software dev teams to work within a monorepo, which is a version-controlled code repository that contains several projects. Think of Nx as a VSCode of build tools.

On Nix, you can declare everything necessary to build a package so you don't need to install packages on your system by yourself. I don't want to put myself into a dependency hell anymore. But I have an idea for this: using docker. Docker separates developing environment from host's system so there would be no pre-installed dependencies. It would be good and I'm considering learning docker. Next thing I'm considering is to use something like [nx](https://nx.dev/). If you have better ideas, please tell me.

This is pretty much everything I need for my next Windows environment. Every small tips or tricks are welcome.

In my latest blog, I successfully navigated through the steps of setting up an Expo Monorepo with Nx. The next challenge? Testing! This blog dives into: