I setup a repo for a custom Nx builder and schematics to build an application / init. Initially I developed it in the tools/schematics folder and everything was working, but decided it should live in its own repo. I made sure to add the schematics (collection.json) and builders (builders.json) to the package.json, and setup the two files. Everything up to there seems to be working. I used yarn link to add the schematics to my nx monorepo (so I don't have to push it repeatedly while testing), and then try to add an app with nx g nx-name:app but I keep getting an error that it is unable to find the module for the schematic.
I have tried a lot before posting this. Renaming files. Using index.ts. Reinstalling node_modules. Re-linking in yarn.
Error:
Cannot find module 'C:\...\monorepo\node_modules\nx-name\src\schematics\application\application'
Require stack:
- C:\...\monorepo\node_modules\#angular-devkit\schematics\tools\export-ref.js
- C:\...\monorepo\node_modules\#angular-devkit\schematics\tools\index.js
- C:\...\monorepo\node_modules\#nrwl\workspace\src\command-line\workspace-schematic.js
- C:\...\monorepo\node_modules\#nrwl\workspace\src\command-line\nx-commands.js
- C:\...\monorepo\node_modules\#nrwl\workspace\index.js
- C:\...\monorepo\node_modules\#nrwl\cli\lib\init-local.js
- C:\...\monorepo\node_modules\#nrwl\cli\bin\nx.js
- C:\...\AppData\Roaming\npm\node_modules\#nrwl\cli\bin\nx.js
My collection.json:
{
"name": "nx-name",
"version": "0.0.1",
"extends": [
"#nrwl/workspace"
],
"schematics": {
"init": {
"factory": "./src/schematics/init/init",
"schema": "./src/schematics/init/schema.json",
"description": "Initialize the plugin",
"aliases": [
"ng-add"
],
"hidden": true
},
"application": {
"factory": "./src/schematics/application/application",
"schema": "./src/schematics/application/schema.json",
"description": "Create an application",
"aliases": [
"app"
]
}
}
}
My folder structure:
- src
- builders
- build
- build.impl.ts
- schema.json
- schematics
- application
- files
- a bunch of template files
- application.ts
- schema.d.ts
- schema.json
- init
- init.ts
- schema.d.ts
- schema.json
- .gitignore
- builders.json
- collection.json
- package.json
- tsconfig.json
- index.ts
- yarn.lock
Update:
Pointing the collection factories to the dist folder seems to run it partially? JSON files update, but the builder doesn't run and generate files from the templates. Maybe there is something I need to setup so that it knows to build the typescript source?
Adding package.json deps:
"dependencies": {
"#angular-devkit/architect": "^0.803.21",
"#angular-devkit/core": "8.3.14",
"#angular-devkit/schematics": "8.3.14",
"shelljs": "^0.8.3",
"typescript": "~3.5.3"
},
"devDependencies": {
"#nrwl/workspace": "^8.9.0",
"#types/node": "^13.1.4",
"#types/shelljs": "^0.8.6"
}
Turns out I was outputting the typescript builds to a dist folder. Don't do that or it breaks all the paths for the collection.json and any files used for templates. Just build the js files in the same locations as the ts files.
Related
I understood that Ionic cannot handle 'yarn workspace' which build the project with react-app-rewired https://github.com/ionic-team/ionic-cli/issues/4430
As suggested in this post, I configure my monorepo with the multi-app option( https://ionicframework.com/docs/cli/configuration#multi-app-projects)
To valide the project structure, I firstly tried to share a simple constants.
import * as ROLES from '../../../../lib/constants'
but when I launch ionic serve --project=app
Have got this error :
Module not found: You attempted to import ../../../../lib/constants
which falls outside of the project src/ directory. Relative imports
outside of src/ are not supported.
Project structure :
ionic.config.json
{
"defaultProject": "myProject",
"projects": {
"app": {
"name": "My First Ionic App",
"type": "react",
"root": "packages/app",
"integrations": {
"capacitor": {}
},
}
}
}
How to manage to share files and components ?
Thank you
Ok, after several day. I have an answer to build monorepo with Ionic & Capacitor !
1 - Build your monorepo with Yarn workspace
this tutorial is simple and clear : https://jibin.tech/monorepo-with-create-react-app/
Then you will use react-app-rewired and not 'react-scripts` anymore
2 - Then do not use ionic serve that use react-scripts
react-app-rewired start
3 - and Capacitor !
The command ionic cap run also use react-scripts then you have to find an alternative
The answer is here https://capacitorjs.com/docs/guides/live-reload : Do not use the Ionic CLI
Capacitor supports CLIs with live reload capability.
Within capacitor.config.json, create a server entry then configure the url field
using the local web server’s IP address and port:
"server": { "url": "http://192.168.1.68:8100", "cleartext": true
},
Bonus : I created a script to automatically update capacitor.config.json
https://gist.github.com/damienromito/e6b3930ffde4c7240f109d1de69febb5
I have been trying to use Google API in my 2.X CakePHP project for a couple of days now, and I seem not to be able to use it. The method I used to load it into my test server was installing it in local with composer (I changed my composer.json to include the library which looks like this).
{
"name": "cakephp/cakephp",
"description": "The CakePHP framework",
"type": "library",
"keywords": ["framework"],
"homepage": "http://cakephp.org",
"license": "MIT",
"authors": [
{
"name": "CakePHP Community",
"homepage": "https://github.com/cakephp/cakephp/graphs /contributors"
}
],
"support": {
"issues": "https://github.com/cakephp/cakephp/issues",
"forum": "http://stackoverflow.com/tags/cakephp",
"irc": "irc://irc.freenode.org/cakephp",
"source": "https://github.com/cakephp/cakephp"
},
"require": {
"php": ">=5.2.8",
"ext-mcrypt": "*",
"google/apiclient": "^2.0"
},
"require-dev": {
"phpunit/phpunit": "3.7.*",
"cakephp/debug_kit" : "2.2.*"
},
"bin": [
"lib/Cake/Console/cake"
]
}
After that I uploaded my whole project using SFTP to my server, and even though I am running a simple script it would show the error "Google_Client class not found". My attemp looks like this:
dd(new Google_Client());
exit();
My output is as follows:
'Class 'Google_Client' not found'
'/var/www/html/app/Controller/AgendaEventosController.php'
I have tried with composer dumpautoload and reuploading the composer autoload to my server via ftp and also tried to import the autoload like this:
App::import("Vendor/Google/apiclient/src/Google","autoload.php"
Can anyone point a better approach to my problem? (also, for what it may be worth, my server's php version is 5.5.9 and my local enviroment -which I used to install the dependency- is 7.2, but I don't think this may be an issue)
As an aditional note: the README file states:
Finally, be sure to include the autoloader:
```php
require_once '/path/to/your-project/vendor/autoload.php';
It may also be worth mentioning I ran the composer install command in the root folder (not in the app folder).
But I am confused on where I should add this line, or even if I should add it, since CakePHP autoloader fires automatically (as fas as I know).
I was trying sencha 6.5, I've created a package using
sencha generate package DemoPkg
This has created a package for me, but I do not find directories for classic and modern inside it. Did anyone faced this issue? Any suggestion or help on this will be much appreciated.
As per sencha guide the structure of package should have following structure,
packages/
local/
foo/ # Top-level folder for the package
.sencha/
package/
sencha.cfg # Sencha Cmd configuration for this package
build-impl.xml # Generated build script for package
plugin.xml # Sencha Cmd plugin for this package
codegen.json # Data to support 3-way merge in code generator
classic/ # Classic toolkit-specific src code
examples/ # Example applications demonstrating the package
licenses/ # License agreement
modern/ # Modern toolkit-specific src code
overrides/ # Folder for automatically activated overrides
resources/ # Static resources (typically has images folder)
sass/ # Container for styling code
etc/ # General, non-component oriented styling
example/ # - internal use
src/ # Style rules named by component
var/ # Variables and mixins named by component
src/ # Folder for normal JavaScript code
build.xml # Build script (called by `sencha package build`)
package.json # Package descriptor
Readme.md # High-level information about this package
Sencha CMD will not generate the toolkit folders as mentioned in the docx and there is no options to do it, only we can mention the toolkit type for theme package. so we need to manually create the folders similar to universal app(both classic & modern) and update the package.json with path ${toolkit.name} like below
"resources": [
{
"path": "resources"
},
{
"path": "${toolkit.name}/resources"
}
],
"sass": {
"namespace": "UniversalPkg",
"etc": [
"${package.dir}/sass/etc/all.scss",
"${package.dir}/${toolkit.name}/sass/etc/all.scss"
],
"var": [
"${package.dir}/sass/var/all.scss",
"${package.dir}/sass/var",
"${package.dir}/${toolkit.name}/sass/var/all.scss",
"${package.dir}/${toolkit.name}/sass/var"
],
"src": [
"${package.dir}/sass/src",
"${package.dir}/${toolkit.name}/sass/src"
]
},
"classpath": [
"${package.dir}/src",
"${package.dir}/${toolkit.name}/src"
],
"overrides": [
"${package.dir}/overrides",
"${package.dir}/${toolkit.name}/overrides"
],
I have a React/Redux typescript project A. My team decided to split out some of the React components and Redux code into an NPM module, so I created another React/Redux TS project B.
Initially, when I tried to install B from A, I got errors due to type redeclarations, since both A and B depend on the same type declarations files (react, redux, etc). So I moved all of B's #types dependencies to be peer dependencies. This allows me to properly install B from A.
However, for development purposes, I would like to npm link to B from A, so I don't constantly have to recompile and reinstall B. But because npm link creates a symlink, it points to the entire B project, including the type definitions that I need to avoid.
Does anyone know how to solve this conundrum?
This problem isn't particularly related to typescript, but is a general problem of how to link two javascript packages together and prevent libraries from loading multiple times. A big factor on how you solve this is based on what build/bundler you use. I think this stackoverflow answer is pretty good if you only care about de-duping react.
Here is an example of solving it using webpack.
The first thing is make sure any shared dependencies in your child package are devDependencies and peerDependencies and your parent package is setting them as the needed dependencies and devDependencies.
A - package.json
{
"dependencies": {
"B": "1.0.0",
"react": "x.x.x",
},
"devDependencies": {
"#types/react": "x.x.x"
}
}
B - package.json
{
"version": "1.0.0",
"peerDependencies": {
"#types/react": "x.x.x",
"react": "x.x.x"
},
"devDependencies": {
"#types/react": "x.x.x",
"react": "x.x.x"
}
}
If you are running webpack from package A, you need to make sure to resolve node_modules when applicable only from package A's node_modules.
const path = require('path')
module.exports = {
// rest of your webpack condig...
resolve: {
modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
}
}
Here is also another solution using react-app-rewired that does the same thing
const path = require('path')
module.exports = function override(config) {
config.resolve = Object.assign({}, config.resolve, {
modules: [path.resolve(__dirname, 'node_modules'), ...config.resolve.modules]
})
return config
}
How added my-custom.css file in app.json or bootstrao.json files
app,json
{
"name": "My App",
"requires": [
],
"id": "166372b1-e416-4921-8ef2-2495765b9d76"
}
bootstrap.json
/**
* This file is generated by Sencha Cmd and should NOT be edited. It is a
* combination of content from app.json, and all required package's package.json
* files. Customizations should be placed in app.json.
*/
{"id":"166372b1-e416-4921-8ef2-2495765b9d76","js":[],"css":[]}
I think you're asking about adding CSS files to your application's app.json file. Basically, you need to add the following section to app.json then run sencha app build (which will update bootstrap.json for you).
"css": [
{
"path": "resources/css/my-styles.css"
}
],
However, a project initialized with Sencha Cmd would've had this section with helpful comments. Take a few minutes to become more familiar with Sencha Cmd and how you can use that to manage your project's files and build process:
http://docs.sencha.com/cmd/4.0.0/#!/guide/command_app_ext42