implementing monorepo for react and node js web application using lerna

2
votes

i am trying to build a monorepo , which consist of a react and node js application so the frontEnd folder which is created using react app and backEnd folder which consist of all server code.

I have done the below steps

installed lerna globally

created a new folder and initialized the repository.

inside the new folder run lerna init, which created 2 files lerna.json, package.json and 1 folder as packages.

inside packages folder i run create-react-app frontEnd, it created a new react application

run the command mkdir backEnd, to created the backEnd folder in the packages folder

now my packages folder consist of two folders frontEnd and backEnd.

the frontEnd consist of a package.json which comes with create-react-app

questions

Do i need to remove the package.json from the frontEnd folder

how i configure the lerna.json and package.json in the root folder.

how can i run the application?

i have searched but i am not getting the solution to make a react-nodejs application with lerna using create-react-app

1
node.jsreactjslernamonorepo

1 Answers

1
votes

I did this task here

Do i need to remove the package.json from the frontEnd folder

No, each project in the /packages folder may have its dependencies. The modules installed in the root package.json are installed in all the subproject. When you run lerna bootstrap it will run npm install on each project.

how i configure the lerna.json and package.json in the root folder.

The lerna.json is quite simple and contains configuration that collects all the project lerna should manage.

The package.json is to track shared packages between all your project. For example you could have some constant-module that must be the same version on both the projects. In a simple fontend/backend, it is realistic to don't have any shared modules.

how can i run the application?

when you run lerna run start, lerna will execute npm run start on all the tracked project. So you must be aware how to start you whole application.

In my example, I implemented the start only in the backend project since it will serve statically the frontend files and I didn't want to start another webserver only for the frontend.