Using GitHub Actions with a React/NodeJS + shared code monorepo - npm

I'm writing an application split (at least for this repo) between a React frontend and an Express/NodeJS server.
Some of the code that I needed was used by both, so I split it into a third folder and used npm link to locally install it into the frontend and server folders.
shared-code/
├─ dist/ // output of npm build (tsc)
├─ src/
│ ├─ index.ts // export const sharedFn = () => {}
├─ tsconfig.json
├─ package.json
├─ package-lock.json
server/
├─ dist/ // output of npm build
├─ src/
│ ├─ index.ts // import { sharedFn } from 'shared-code'
├─ tsconfig.json
├─ package.json
├─ package-lock.json
frontend/
├─ dist/ // output of npm build
├─ src/
│ ├─ index.ts // import { sharedFn } from 'shared-code'
├─ tsconfig.json
├─ package.json
├─ package-lock.json
// in shared-code directory
npm run build
// in server directory
npm link ../shared-code
// produces in server/package.json
"dependencies": {
"express": "^4.18.2",
"shared-code": "file:../shared-code",
"ws": "^8.11.0"
},
The dist folders are generated by tsc (or npm run build, which for the frontend uses a CRA script) but are not stored in the repo. This seems to complicate the use of a GitHub action, since the shared-code/dist doesn't exist in a clean checkout, breaking naïve approaches to a separate script for each portion, and my attempts to use needs and a single yaml file.
I haven't been able to work out how to do this in a GitHub action, or how to approach this. I don't want to publish an npm package publicly, and my desired outcome would be to produce GitHub releases in a form that I can download them onto a remote device (by curl, wget, whatever) and then run them with node some/path/to/dist/index.js, chromium /some/path/to/dist/index.html. (But I'd say that all of deployment is not in the scope of this question - only writing in case it changes the suitable method.)

Related

Using Vue3 and Vue2 simultaneously in monorepo

I have a problem building Vue3 and Vue2 apps in monorepo.
When trying to build the apps I see an error in Vue3 app:
error in ./src/App.vue
Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')
ERROR in ./src/App.vue
Module build failed (from ../../node_modules/#vue/cli-service/node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
at Object.loader (../../node_modules/#vue/cli-service/node_modules/vue-loader/dist/index.js:70:34)
# ./src/main.ts 2:0-28 5:10-13
Monorepo tool: TurboRepo
Package manager: yarn v1
Vue3 version: 3.2.13
Vue2 version: 2.6.11
Vue3 cli version: 5.0.8
Vue2 cli version: 4.5.17
webpack for vue3: 5.54
webpack for vue2: 4.46
Folder structure
├─ apps/
│ ├─ vue3-app/
│ │ ├─ package.json
│ ├─ vue2-app-1/
│ │ ├─ package.json
│ ├─ vue2-app-2/
│ │ ├─ package.json
├─ package.json
In the root package.json I declared workspaces
"workspaces": {
"packages": [
"apps/vue2-app-1",
"apps/vue2-app-2",
"apps/vue3-app"
],
I think it could be a problem with packages in root node_modules (Vue3 trying to use wrong package version?) so I tried yarn nohoist option but it didn't change anything
"nohoist": [
"vue3-app/**/vue",
"vue3-app/**/vue/**",
"vue2-app-1/**/vue/**",
"vue2-app-1/**/vue/**",
"vue2-app-2/**/vue/**",
"vue2-app-2/**/vue/**",
"vue3-app/**/vue-loader",
"vue3-app/**/vue-loader/**",
"vue2-app-1/**/vue-loader/**",
"vue2-app-1/**/vue-loader/**",
"vue2-app-2/**/vue-loader/**",
"vue2-app-2/**/vue-loader/**"
]
What could be causing the problem?

Configure gradle wrapper for all subprojects

I have the following monorepo structure:
root/
├─ gradle/
│ ├─ wrapper/
├─ services/
│ ├─ Consumer/
│ │ ├─ build.gradle.kts
│ │ ├─ settings.gradle.kts
│ ├─ Reader/
│ │ ├─ build.gradle.kts
│ │ ├─ settings.gradle.kts
//... more services
├─ gradle.properties
├─ gradlew
├─ gradlew.bat
I would like to keep the Gradle Wrapper at the top level. However, when I'm trying to import a single service into Intellij, I have to reconfigure the Gradle and provide gradle wrapper path.
I have seen there is an option to define gradle path by calling gradle wrapper task.
Is it possible somehow to configure the wrapper path as part of settings.gradle.kts in each service I have so me or other project members have to remember about changing IDE settings?

CopyWebpackPlugin not copying files when running dev server

what I am trying to achieve
I am trying to synchronise locale files from a yarn workspace to multiple Vue apps in a monorepo so they can be used with i18next in each app. They need to be:
kept in sync during development
automatically updated when the translation files get updated
have them eventually in the dist folder so that they get deployed with the rest of the app (which should happen automatically when the files are in the public folder)
In order to keep the bundle size small, I can't just bundle the whole package - the files need to be copied individually with their original file names and stored in the public folder of each app and the UI library.
the problem
I am trying to configure CopyWebpackPlugin, but I am either
just getting an initial copy from translation/locales to public/locales on starting up the dev server
or the dev server ends up in a loop when I try to enable the writeToDisk option, plus it starts flooding the dist folder with hot reload files.
my vue.config.js *
module.exports = {
devServer: {
writeToDisk: true,
},
configureWebpack: {
plugins: [
new CopyPlugin({
patterns: [
{
from: `${path.dirname(
require.resolve(`#namespace/translations/package.json`)
)}/locales`,
to: "./public/locales",
toType: "dir",
},
],
}),
],
},
*based on instructions from https://webpack.js.org/plugins/copy-webpack-plugin/, it includes a reference to yarn workspaces
running yarn serve with this config results in a loop. The correct files are copied to the ./public folder, but at the same time, it creates the ./dist folder and floods it with ...hot-update.json files.
if I run yarn build the first time, the locale files get copied to the ./public folder, but not to the ./dist folder (so it seems it copies the files at the end of the process, so the latest files aren't included in the ./dist folder
current folder structure
Monorepo
└── packages
├── applications
│ ├── app1
│ │ ├── public
│ │ └── dist
│ ├── app2
│ └── ...
└── common
├── translations
│ └── locales
│ ├── en-GB
│ │ └── common.json
│ └── de-DE
├── ui
└── ...
versions
#vue/cli 4.5.12
webpack#4.46.0
copy-webpack-plugin#6.4.1
Any help with getting this setup to work would be very much appreciated.

React-native installing required CocoaPods dependencies stuck

i cant finish react-native init as the process keep stuck at instaling required cocoapods dependencies please help
this is a few part what shown in terminal:
[4/4] 📃 Building fresh packages...
success Saved lockfile.
success Saved 48 new dependencies.
├─ #babel/core#7.5.0
├─ #babel/runtime#7.5.0
├─ #react-native-community/eslint-config#0.0.5
├─ #types/eslint-visitor-keys#1.0.0
├─ #typescript-eslint/eslint-plugin#1.11.0
├─ #typescript-eslint/experimental-utils#1.11.0
├─ #typescript-eslint/parser#1.11.0
├─ #typescript-eslint/typescript-estree#1.11.0
├─ acorn-jsx#5.0.1
├─ acorn#6.2.0
├─ ajv#6.10.0
├─ babel-jest#24.8.0
├─ chardet#0.7.0
├─ doctrine#3.0.0
├─ emoji-regex#7.0.3
├─ eslint-scope#4.0.3
├─ eslint-utils#1.3.1
├─ eslint#6.0.1
├─ espree#6.0.0
├─ esquery#1.0.1
├─ external-editor#3.0.3
├─ file-entry-cache#5.0.1
├─ flat-cache#2.0.1
├─ flatted#2.0.1
├─ functional-red-black-tree#1.0.1
├─ glob-parent#3.1.0
├─ ignore#4.0.6
├─ import-fresh#3.1.0
├─ inquirer#6.4.1
├─ is-extglob#2.1.1
├─ is-glob#4.0.1
├─ jest#24.8.0
├─ json-stable-stringify-without-jsonify#1.0.1
├─ levn#0.3.0
├─ lodash.unescape#4.0.1
├─ metro-react-native-babel-preset#0.55.0
├─ optionator#0.8.2
├─ parent-module#1.0.1
├─ path-dirname#1.0.2
├─ progress#2.0.3
├─ react-refresh#0.2.0
├─ regexpp#2.0.1
├─ rxjs#6.5.2
├─ table#5.4.1
├─ text-table#0.2.0
├─ tslib#1.10.0
├─ tsutils#3.14.0
└─ write#1.0.3
✨ Done in 19.41s.
info Installing required CocoaPods dependencies
Installing required CocoaPods dependencies takes time. Waiting for about 30mins worked for me.
Waiting for about 40mins worked for me. Installing required CocoaPods dependencies takes time. See my screenshot.
Break with Ctrl-C.
Enter cd ios
Run pod install --repo-update
But anyway it is not fast. Need wait because big repo cloned into fs under the hood.
Fixed with this - Open Xcode and go to Xcode → Preferences → Locations, and make sure the command line tools is set to the version of Xcode you’re using.
Install CocaPods
CocoaPods is a package management tool for iOS and macOS development. We use it to add the actual React Native framework code locally into your current project.
We recommend installing CocoaPods using Homebrew.
$ brew install cocoapods
or
sudo gem install cocoapods
You can try to disable iCloud, this helped me.
I was having the same issue. Solved by changing my internet connection from WIFI to mobile data. Then I ran the following commands which worked for me:
$ pod deintegrate
$ pod install
Hope this will work.
It took a while for CocoaPods installation and I got error at the end. podfile was inside iOS folder with no .xcworkspace. I did pod install again (in iOS folder) and all good. Please make sure CocoaPods is installed.
I think the main problem is mismatch version of CocoaPods and react native dependency. So you can try update Cocoapods
sudo gem install cocoapods
and then go inside your react native project in /ios folder then install pod again with
pod install

How to view the dependency tree of a given npm module?

How can I get the tree of a module available to npm, but not installed locally ?
npm ll does the job for locally installed packages. But it doesn't work for modules not installed or modules installed globally.
I tried npm list bower but that's not it.
You can generate NPM dependency trees without the need of installing
a dependency by using the command
npm list
This will generate a dependency tree for the project at the current directory and print it to the console.
You can get the dependency tree of a specific dependency like so:
npm list [dependency]
You can also set the maximum depth level by doing
npm list --depth=[depth]
Note that you can only view the dependency tree of a dependency that you have installed either globally, or locally to the NPM project.
You can use the npm-remote-ls module. You can install it globally:
npm install -g npm-remote-ls
And then call:
npm-remote-ls bower
Alternatively, npm#5.2.0 installed then you can use npx and avoid globally installing the command - just call:
npx npm-remote-ls bower
This site allows you to view a packages tree as a node graph in 2D or 3D.
http://npm.anvaka.com/#/view/2d/waterline
Great work from #Avanka!
Here is the unpowerful official command:
npm view <PACKAGE> dependencies
It prints only the direct dependencies, not the whole tree.
You can use howfat which also displays dependency statistics:
npx howfat jasmine
If you want to get the actually dependency path of specific package and want to know why you have it, you can simply ask yarn why <MODULE>.
example:
$> yarn why mime-db
yarn why v1.5.1
[1/4] Why do we have the module "mime-db"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "mime-db#1.37.0"
info Reasons this module exists
- "coveralls#request#mime-types" depends on it
- Hoisted from "coveralls#request#mime-types#mime-db"
info Disk size without dependencies: "196kB"
info Disk size with unique dependencies: "196kB"
info Disk size with transitive dependencies: "196kB"
info Number of shared dependencies: 0
Done in 0.65s.
View All the metadata about npm module
npm view mongoose(module name)
View All Dependencies of module
npm view mongoose dependencies
View All Version or Versions module
npm view mongoose version
npm view mongoose versions
View All the keywords
npm view mongoose keywords
This command output all modules with dependencies in a tree structure:
npm ls -a
If you are using yarn, then you can go with yarn list from the root directory of the project. It'll give you a tree like structure of all the transitive dependencies like below:
├─ #ampproject/toolbox-core#2.7.4
│ ├─ cross-fetch#3.0.6
│ └─ lru-cache#6.0.0
├─ #ampproject/toolbox-optimizer#2.7.0-alpha.1
│ ├─ #ampproject/toolbox-core#^2.6.0
│ ├─ #ampproject/toolbox-runtime-version#^2.7.0-alpha.1
│ ├─ #ampproject/toolbox-script-csp#^2.5.4
│ ├─ #ampproject/toolbox-validator-rules#^2.5.4
│ ├─ abort-controller#3.0.0
│ ├─ cross-fetch#3.0.5
│ ├─ cross-fetch#3.0.5
│ │ └─ node-fetch#2.6.0
│ ├─ cssnano-preset-simple#1.2.0
│ │ ├─ caniuse-lite#^1.0.30001093
│ │ ├─ postcss#^7.0.32
│ │ └─ postcss#7.0.35
│ │ ├─ chalk#^2.4.2
│ │ ├─ source-map#^0.6.1
│ │ └─ supports-color#^6.1.0
To get it as a list:
% npx npm-remote-ls --flatten dugite -d false -o false
[
'dugite#1.91.3',
'checksum#0.1.1',
'progress#2.0.3',
'mkdirp#0.5.5',
'rimraf#2.7.1',
'tar#4.4.13',
'optimist#0.3.7',
'got#9.6.0',
'minimist#1.2.5',
'chownr#1.1.4',
'glob#7.1.6',
'fs-minipass#1.2.7',
'minizlib#1.3.3',
'minipass#2.9.0',
'safe-buffer#5.2.1',
'yallist#3.1.1',
'wordwrap#0.0.3',
'#szmarczak/http-timer#1.1.2',
'cacheable-request#6.1.0',
'#sindresorhus/is#0.14.0',
'decompress-response#3.3.0',
'duplexer3#0.1.4',
'lowercase-keys#1.0.1',
'mimic-response#1.0.1',
'get-stream#4.1.0',
'to-readable-stream#1.0.0',
'p-cancelable#1.1.0',
'url-parse-lax#3.0.0',
'fs.realpath#1.0.0',
'inflight#1.0.6',
'inherits#2.0.4',
'once#1.4.0',
'path-is-absolute#1.0.1',
'minimatch#3.0.4',
'defer-to-connect#1.1.3',
'clone-response#1.0.2',
'get-stream#5.2.0',
'http-cache-semantics#4.1.0',
'lowercase-keys#2.0.0',
'responselike#1.0.2',
'keyv#3.1.0',
'pump#3.0.0',
'prepend-http#2.0.0',
'normalize-url#4.5.0',
'wrappy#1.0.2',
'brace-expansion#1.1.11',
'json-buffer#3.0.0',
'end-of-stream#1.4.4',
'concat-map#0.0.1',
'balanced-match#1.0.0'
]
There is also a nice web app to see the dependencies in a weighted map kind of view.
For example:
https://bundlephobia.com/result?p=sanitize-html#1.19.1
Unfortunately npm still doesn't have a way to view dependencies of non-installed packages. Not even a package's page list the dependencies correctly. 🙄
Luckily installing yarn:
brew install yarn
Allows one to use its info command to view accurate dependencies:
yarn info #angular/router#4.4.7 dependencies
yarn info #angular/router#4.4.7 peerDependencies