Create a parent React project (Shared)

Question

We are going to create a new React environment and we need to create multiple projects that will have the same visual, sort of (same nav bar, components, etc).

I want to know if it's feasible to do something like this:

• Have only 1 project that represents the parent project (containing the complete rendered UI, components, etc)
• Have n subprojects that depend on the parent project. I don't want a copy of the parent project for each subproject. When the parent project is updated, each new sub-project will have the new parent project update in his build.
• The subproject will contain only what is specific to its project. For example: search pages, detail pages, images, etc. I don't want to have a copy of the parent project to commit to, so I don't want a copy of the parent project itself in the subproject.
• If a subproject needs to customize a parent file, we copy the parent file into the subproject, customize it, and when the subproject build is complete, we have the customized version of the script in the build.

I was planning to use an API to dynamically load the menu items.

I've seen something like this in an in-house UI framework where I worked before and I would like to know if it's feasible in React.

I've searched and read some other sites, but they don't have what I want specifically. I'm open to other ways of doing something like this.

I thought about doing an update of the parent dependency in the subproject, copying the parent files to the build folder and then copying the subproject files and overriding sames file path/name to keep only the customized files. But I don't know if there is a better solution. This solution might work for the build stage, but I'm screwed when I just want to start the subproject without having the parent files.

Thanks in advance!

Consult React documentation, search for parent and subproject in React.

Answer 1

For those who want to do something similar, I used NX. NX is a monorepo manager. Because, yes, the only easy way I found is to create a git project that contains all the UI projects.

It's not possible to convert an existing project directly into a base project. There are the steps I've done to do 90% of the work:

1. Start an empty NX workspace
2. Create a library project. This will be your "base" project. It will contain all your shared components.
3. Install all your dependencies into the root folder (workspace).
4. Add component after component to this library project, including the main page of your web application, static files, images, etc. Tip: add a prefix to all components you create in this library. This will help to find your components when you try to import them.
5. Export all your shared components in the index.ts of the library project.
6. Create a new NX application, in my case in React with @nx/React. This will be your subproject (currently for testing).
7. In the generated index.html or index.tsx, depending on your project, change the node that calls the default main page component. Instead of using the default main component created by the generator, use the main page component you created in your library. Configure the project to successfully build your application.
8. Launch the web application. You should see the same look and feel as before.

I also wrote a custom NX plugin/generator to create a new subproject based on a template. This generator just need a project name in parameter to create the new project. Watch the 2 tutorial videos I found, which help a lot.

1. https://www.youtube.com/watch?v=9CsHV4umWR8
2. https://www.youtube.com/watch?v=b0pk_tqTmzI

The subproject created in step 6 will be your subproject template. Copy all the files of the project and put them in the "file" folder of your new NX plugin generator. Every place in your copied files you need to adjust them to insert the project name, replace your current subproject name by the variable name you have created in your generator schema. i.e. <%= project_name %>. When you customize a file to insert a variable, you need to change the extension to *.template. i.e. project.json.template when I customize the NX project file project.json. Then in your generator script just call the generateFiles().

export async function createProjectGenerator(
  tree: Tree,
  options: CreateProjectGeneratorSchema
) {
  const projectRoot = `apps/${options.project_name}`;
  generateFiles(tree, path.join(__dirname, 'files'), projectRoot, options);
  await formatFiles(tree);
}

In my case, projectRoot is the folder where the new application will be created and option.project_name is my parameter created in schema.json.

A great tool to have when working with NX is to install the NX console in your VSCode. After scanning your files, you should be able to create a new project with your generator by clicking "generate" and select your new launcher in the NX Console.

Another trick, I used Vite for the workspace bundler. It's not bad, BUT, when working with NX, the aliases are a pain in the @SS. Some are created by default in vite.config, which is correct, but I suggest you don't create others. They work randomly. One day the project will build successfully and the other day it will fail to compile without changing any code. It's better to use relative path.

I said in the intro that this recipe covers 90% of my needs, that's because I didn't try to override a file that comes from the library (shared project). Maybe I will face this situation later...

Well, I think I have all my steps covered. Let's code!