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
Related
We have a Laravel 8 application with Laravel Mix 6.0.49 and a React frontend. The application runs inside a docker container in production and development. Up until now, the frontend was compiled outside the docker container for some reason, but since we are moving to a fully dockerized environment, we are required to call the frontend scripts from inside the container. This all works fine, except for an environment variable we are setting in package.json, which allows us to pass the version of the app as a mix variable. Here is the current setup:
// package.json
"version": "0.1.1",
"scripts": {
...
"watch": "cross-env APP_VERSION=$(node -pe 'require(\"./package.json\").version') mix watch",
...
// .env
...
MIX_APP_VERSION="${APP_VERSION}"
...
// MyComponent.jsx
...
<div>version {process.env.MIX_APP_VERSION}</div>
...
The environment variable worked fine when the watch script was called outside the docker container.
Has anyone any idea of why it suddenly does not work anymore? I'm open to other ways of approaching this too.
I fixed this issue in the end by removing the variable related stuff from package.json including the cross-env dependency and setting the environment variable through the webpack config instead (webpack.mix.js)
...
.webpackConfig({
plugins: [
new webpack.DefinePlugin({
'process.env.APP_VERSION': JSON.stringify(
process.env.npm_package_version,
),
}),
],
})
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.
Is it possible to set environment variables in the manifest.json file of a Chrome Extension?
Like wOxxOm said, I used webpack to proccess manifest.json.
In my case, I needed to set version automatically on manifest file.
I added to webpack script:
plugins: [
new CopyWebpackPlugin([
{
from: "public/manifest.json",
to: "manifest.json",
transform(content, path) {
return modify(content)
}
}
]),
]
And the modify function replaces version on file for the parameter:
function modify(buffer) {
var manifest = JSON.parse(buffer.toString());
let argv = process.argv[2];
if (argv) manifest.version = argv.split("=")[1];
let manifest_JSON = JSON.stringify(manifest, null, 2);
return manifest_JSON;
}
So, I build like "yarn build --version=x.x" and webpack do what I need.
PS: if you're going to use this, remember to change:
the manifest.json directory, if necessary;
the value in the modify function, in my case it was version
As the OP has mentioned in her answer, using the copy-webpack-plugin in the webpack.config.js file is the way to go if you're building your Chrome Extension with React. However, if your React app is based on create-react-app, directly editing the webpack.config.js file (which is located in node_modules/react-scripts/config) is not recommended.
In such a case, use craco, which is an npm package that can be used to customize an app based on create-react-app. Here's how you do it:
Install craco into your project using npm i #craco/craco.
Install copy-webpack-plugin as a dev-dependency in your project using npm i --save-dev copy-webpack-plugin.
Let's suppose we're creating a development and a production build of our Chrome Extension. Let's also suppose we've already assigned "version": "0.1.0" in our Chrome Extension's manifest.json. Depending on the build type, we'd like to assign accordingly the version_name field in our Chrome Extension's manifest.json, e.g., "version_name": "0.1.0 dev" for development and "version_name": "0.1.0" for production. In your React app's package.json, introduce two fields (the script names can be whatever you wish) as follows:
"scripts": {
...
"build-dev": "CRX_ENV=dev craco build", // or "set CRX_ENV=dev&& craco build" in the case of Windows
"build-prod": "CRX_ENV=prod craco build", // or "set CRX_ENV=prod&& craco build" in the case of Windows
...
}
Create a new file called craco.config.js in the root of your project. As per your need, do something similar to the following in the craco.config.js file:
const CopyPlugin = require("copy-webpack-plugin")
module.exports = {
webpack: {
plugins: [
new CopyPlugin({
patterns: [
{
from: "public/manifest.json",
to: "manifest.json",
transform(content, path) {
return modifyManifest(content)
},
},
],
}),
],
},
}
function modifyManifest(buffer) {
const manifest = JSON.parse(buffer.toString())
if (process.env.CRX_ENV === "dev") {
manifest.version_name = `${manifest.version} dev`
} else if (process.env.CRX_ENV === "prod") {
manifest.version_name = `${manifest.version}`
}
const manifestJson = JSON.stringify(manifest, null, 2)
return manifestJson
}
Run npm run build-dev. It will create a folder called build in your project root. This build folder is your unpacked Chrome Extension, which you can load into Chrome using the "Load unpacked" button on the chrome://extensions page. Once loaded, you should be able to see 0.1.0 dev as the version name of your Chrome Extension.
Delete the build folder created from the previous step and run npm run build-prod, and repeat the same steps. You should be able to see 0.1.0 as the version name of your Chrome Extension on the chrome://extensions page.
I have a Angular application that uses Webpack as module bundler. In my package.json, I have the following scripts:
"scripts": {
"start": "webpack",
"start-in-war": "??????"
}
Also, this is the output portion of my webpack.config.js
output: {
path: __dirname + "/dist/",
filename: "app.js"
}
Since I also want this application to be packaged into a WAR file with my backend service, I need to pass that path field as parameter, so I will mantain both configurations: the default that is more development-friendly (I don't have to deploy the application anytime I make a client change) and the one I will ultimately use (that would be the "start-in-war" parameter).
How can I achieve that?
Note: The start-in-war script is not gonna be used just for production, also development.
When developing I want to use a a minified .js file of Ext JS 5.1 like they do on Sencha Fiddle. It looks like you can use the cdn link from Sencha but when I use this in the index file it fails.
Is there something I need to be doing in the bootstrap.js file to make it use just a link instead of the Ext Js 5 root folder? I want to use the same link for multiple apps hosted on a server for an enterprise situation.
Also, the Chrome Dev Tools running super slow having to load each file. I want to use one minified file to make this useful again.
I'm not positive how you could use the cdn file referenced in the sencha fiddle website. Adding that link directly to the app while using the microloader would cause errors. The microloader in extjs5 automatically figures out which files to load in the framework.
However, you can achieve a similar goal of using a minified version of the extjs framework if you are using sencha cmd.
They detail how to setup your project to use the minified or developer copy of extjs5 instead of loading all the seperate files in this forum post
Here are the changes to make to your project documented to stack overflow in case that forum post is no longer available:
Step One
make sure you are using a version of sencha cmd greater than 5.0.2.
To determine your version of sencha cmd you can type the following in the command prompt:
sencha which
If you have an older version of sencha cmd you can download the latest copy here
Thanks to Niederee for this little advice, do a sencha app upgrade on your app to make sure it's tied to the latest sencha command build
sencha app upgrade
Step Two
Adjust your app.json manifest file to load the ext-all-rtl-debug.js . Add this file to the "js":[] array in the file:
"js": [
{
"path": "${ext.dir}/build/ext-all-rtl-debug.js" // new default for generated apps
},
{
"path": "app.js",
"bundle": true
}
],
You can also add sencha charts if they are required to get that minified build too:
{
"path": "${ext.dir}/packages/sencha-charts/build/sencha-charts-debug.js"
},
Optionally you can also adjust the cache preferences based on dev/production
Add this additionally to the app.json file:
"development": {
"loader": {
"cache": true
}
},
"production": {
"loader": {
"cache": "${build.timestamp}"
}
}
Step Three
In the command prompt run the following sencha command to refresh your application's bootstrap manifest.
sencha app refresh