I have some services organized into a monorepo in such a fashion:
repo_root/
├── services/
│ ├── service_one/
│ ├── service_two/
│ └── service_three/
├── package.json
├── node_modules
├── .eslintrc
Additionally, each individual service has its own package.json and node_modules. I would like to use the eslint configuration stored in the repo_root directory to lint individual services. My problem is that when I try to run something like
eslint services/service_one
for example, it fails to find the eslint plugin modules that are required by .eslintrc and installed in the node_modules directory of repo_root.
I'd like to avoid redundantly requiring these plugin modules in every service. Is there anyway to configure eslint to intelligently find the modules even though they are in the parent directory of the services themselves?
For anyone wondering, my problem was I was running the command using a globally installed eslint, which in turn looked for global modules. After changing it to run a local version of eslint, everything worked fine!
Related
I'm trying to upgrade packages in my project and getting a problem with the use of #here/maps-api-for-javascript. When I use react-scripts 4.0.3, everything is fine and I can interact with the map.
But when I use react-scripts 5.0.0, I only see the empty map with the Here Maps logo. Also, I see webpack errors in the console that are related to the map
I need to understand why this happening and how can it be fixed to use Here Maps with react-scripts 5.0
My code with the described problem: https://codesandbox.io/s/modest-margulis-ugp8mw?file=/README.md
As discussed in comment please refer below react guide .
Working with React
This article describes how to use the HERE Maps API for JavaScript with React. The target is to demonstrate how to build a React component that displays the map and responds to the actions of the user, be it direct interaction with the map or the other components.
Setup
For the fast setup of the new React application we will use the Create React App environment. It provides a fast way to get started building a new single-page application. Execute the npx runner as below (it requires Node >= 8.10 and npm >= 5.6):
npx create-react-app jsapi-react && cd jsapi-react
The call above produces the scaffolding needed to start the application. The directory structure in the jsapi-react directory looks as follows. The React components reside in the src directory:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── ...
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
The recommended way to use HERE Maps API for JavaScript within this environment is to install maps-api-for-javascript NPM package which is hosted at https://repo.platform.here.com/. Add a registry entry to the NPM configuration by executing the following command:
npm config set #here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/
After that the package from the #here namespace can be installed as usual:
npm install #here/maps-api-for-javascript --save
At this step the environment setup is complete, all packages needed to build a sample application are installed, and it is possible to start the development server by executing:
npm start
The command above launches the development server with the "hot reload" functionality and opens the application in the browser.
For more details please refer below guide.
https://developer.here.com/documentation/maps/3.1.30.15/dev_guide/topics/react-practices.html
I'm trying to setup a monorepo with 3 services sharing some library code.
This is the current situation:
repo: web
pdf/
package.json
reference to shared-ts using github url
tsconfig.json
frontend/
package.json
reference to shared-ts using github url
tsconfig.json
repo: mobile (react-native)
package.json
reference to shared-ts using github url
tsconfig.json
repo: shared-ts
package.json
tsconfig.json
This works but it's a pain to commit to shared-ts, build, change the hash in package.json and commit again.
This is what I'd like to achieve:
repo: monorepo
pdf/
package.json
reference to ../shared-ts
tsconfig.json
frontend/
package.json
reference to ../shared-ts
tsconfig.json
mobile/
package.json
reference to ../shared-ts
tsconfig.json
shared-ts/
package.json
tsconfig.json
So far I've tried:
TypeScript project references, but it seems like there is no way to have dependencies in the shared-ts project
"shared-ts": "../shared-ts" in package.json but it copies shared-ts into the node_modules of each package so I have to re-run yarn everytime I make a change
yarn link in postinstall: error TS2307: Cannot find module 'shared-ts' or its corresponding type declarations.
creating a symlink directly in postinstall with ln -s ../shared-ts/ node_modules/shared-ts/ but it seems TypeScript fails to find the module
npm link in postinstall seems like the most promising but it's really slow and I'm having trouble running it in CI because of some permissions issues.
Is there a good way of doing this? Any ideas on other things I could try?
Solution 1:
with Lerna
you can use workspace and Lerna
yarn workspace & lerna
├── README.md
├── lerna.json
├── package.json
├── packages
│ ├── pdf
│ │ ├── package.json /* "shared-ts": "^1.0.0" */
│ │ └── src
│ ├── frontend
│ │ ├── package.json
│ │ └── src
│ ├── mobile
│ │ ├── package.json
│ │ └── src
│ ├── shared-ts
│ │ ├── package.json
│ │ └── src
├── tsconfig.json
└── yarn.lock
here is an example repo
here you can see x-cli is getting shared x-core
Solution 2:
without Lerna
you can use mtsl package which enables us to make tangible symlinks. you can install this package globally
npm install -g mtsl
then you just need to start to separate these three commands in terminal.
mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/pdf/node_modules/shared-ts
mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/frontend/node_modules/shared-ts
mtsl startwithoutadd -s path_of_project/packages/shared-ts -d path_of_project/packages/mobile/node_modules/shared-ts
Note don't stop this three watcher. after testing, you can make single command from the package.json script
Your use-case can be handled using the npm7 workspaces. In short your new monorepo structure should look like below:
repo: monorepo
package.json // <- here you define the workspaces
pdf/
package.json
reference to shared-ts
tsconfig.json
frontend/
package.json
reference to shared-ts
tsconfig.json
mobile/
package.json
reference to shared-ts
tsconfig.json
shared-ts/
package.json
tsconfig.json
You need to list the workspaces in the root package.json which might look something like below:
{
"name": "awesome-monorepo",
"workspaces": [
"pdf",
"frontend",
"mobile",
"shared-ts"
]
}
After doing that, wherever in the monorepo you decide to use the shared-ts you can add that to dependencies or devDependencies simply referring by the version number instead of relative path.
All the node modules inclusive the workspaces gets hoisted to the root node_modules which is why the module resolution should work without friction.
You can use NX to maintain your repos, wherein your web and mobile repos will be your apps, and the shared-ts will be a lib such that, web and mobile depends on shared-ts lib.
You have a common package.json, or a separate package.json for each repo individually. NX provides dependencyGraph and affected features, wherein if you change the common libs, it figures out which modules/app to build without having to build the complete thing.
Your code structure would look like:
apps:
web:
src
package.json
mobile:
src
package.json
libs:
shared-ts:
src
package.json
workspace.json
It'll probably be best to lookup the official docs for the best setup and options, but I believe it provides what you're looking for.
using yarn workspace & lerna
here is an example monorepo-template
I have done the things you are curious about in a recent project.
Desired results can be achieved by monorepo using lerna and yarn workspace. For details, please go to this link
With the above, we will be creating a package of types.
In other packages, we will be just importing types from packages like below:
import { Post } from "#types";
Things are much easier this way than linking packages ourslef.
I'm currently developing a javascript project that has a kepler.gl dependency, but I need to edit the kepler.gl source code.
I'm unable to import the modified version correctly.
Currently, it only works if kepler.gl is installed via npm/yarn and the import looks like this:
import KeplerGl from 'kepler.gl';
It's important to remember that kepler.gl folder has it's own node_modules directory.
My current directory structure:
MyApp
├── index.html
├── kepler.gl
├── node_modules
├── package.json
├── package-lock.json
├── README.md
├── src
├── webpack.config.js
└── yarn.lock
I've tried several ways, but I want to know the recommended way because I want a solution that will work with any configuration of babel, eslint, other packages installed, etc. that works with the original package.
After some days of research I've found that the probably the recommended way is using link with yarn or npm:
The documentation is clear:
https://docs.npmjs.com/cli/link
https://yarnpkg.com/lang/en/docs/cli/link/
I am trying to use fonoapi-nodejs. I installed it using npm install fonoapi-nodejs --save.
Then when I try to acces it using var fonoapi = require('./fonoapi.node.js');
It gives me an error Error: Cannot find module './fonoapi.node.js' and when I list the npm packages using npm list --depth=0 the package
├── body-parser#1.16.1
├── cookie-parser#1.4.3
├── debug#2.6.3
├── ejs#2.5.6
├── express#4.14.1
├── fonoapi-nodejs#0.1.1
├── morgan#1.7.0
└── serve-favicon#2.3.2 is listed there.
Change require('./fonoapi.node.js') to require('fonoapi-nodejs') to load from node_modules.
When you do npm list, that is showing the contents of your node_modules directory. But you are including ./ at the start of the path, which tells require() to use a relative path rather than the node_modules directory.
Additionally, npm list shows that the module name is fonoapi-nodejs and not fonoapi.node.js.
(And yes, it appears that the documentation for fonoapi-nodejs shows the usage you have. In this situation, it's wrong, though.)
I want to use simple copying and concatenation in my Meteor application. But I faced the problem when Meteor runs all javascript files both on server and client whereas I don't want them to be run anywhere. It's either just config file like Gruntfile.js or partial JS files which I want to process somehow and then put inside client folder.
Now, with Gruntfile.js file in the root of application I have this error when trying to launch meteor application:
W20130826-14:44:39.921(3)? (STDERR) /home/../../.meteor/local/build/programs/server/boot.js:184
W20130826-14:44:40.062(3)? (STDERR) }).run();
W20130826-14:44:40.062(3)? (STDERR) ^
W20130826-14:44:40.062(3)? (STDERR) ReferenceError: module is not defined
I know that I can say to Meteor to ignore file or folder by adding period at the beginning of the filename, and it's working with .Gruntfile.js filename, but of course Grunt does not work in such case. So how can I make them work together? How can I say to Meteor to ignore any file or folder without renaming it?
You can put your meteor app in a subdirectory, and keep node_modules and your grunt file in the top level:
./Gruntfile
./package.json
./node_modules
./app/.meteor
./app/<other meteor files>
You can place a folder named 'private' in the root of your project and it will not be considered when Meteor is building (Meteor version 0.8.1).
├── client
├── common
├── packages
├── private
│ ├── Gruntfile.js
│ ├── config.rb
│ ├── node_modules
│ └── package.json
├── public
├── server
├── smart.json
└── smart.lock
Then do
cd private
grunt watch
Best regards
/Wille
I have no idea how Meteor works but you can change the gruntfile name with:
grunt --gruntfile .Gruntfile.js