Hello Everyone, I am new to Suitecrm.
I downloaded the code and intend to try to edit a few things. I have been able to get the application running locally but I am unable to have the application compile after I save on the frontend.
I can only see my changes after I build the application. Which is not efficient for development.
Can anyone tell me how to achieve this?
Take a look into the official documentation:
Thanks @BrozTechnologies
I have read through the guide i found an instruction here but it is unfortunate that the application is still not watching my changes.
What exactly are you changing?
Angular apps need to be recompiled, that’s just the way it works. That’s how you get to work in TypeScript and get it transpiled to JS. That’s how you get proper bundling and all kinds of optimizations.
I know.
The documentation requires me to run the command: “yarn run build-dev:defaultExt --watch”.
This is expected to watch the changes made in my files and compile. But it is not watching the changes in my case.
For inastance, I added a test link to the footer.component.html. The app does not compile to show the new link added on the interface.
I need the app to compile after saving every change. Hence, the changes will show on the GUI.
Hey @Deal,
Are you doing your changes within the extensions/defaultExt folder?
The yarn run build-dev:defaultExt --watch will only watch the extensions/defaultExt folder (see the angular.json config).
The footer.component.html is a core file, you need to do watch on the core and shell.
Just a warning: the changes done to core folder are not upgrade safe. Its not recommended. All files there will be replaced whenever you upgrade. You can track the changes by using git or similar, but is going to be hard work.
There is a guide on building the the front end on:
Thanks @anthony.oak.castro
I guess that means I have to make a copy of the component I want to extend and make my changes in the extensions/defaultExt folder.
Note that you have yarn commands for several parts of the app: shell, common, core, defaultExt
"scripts": {
"ng": "ng",
"start": "npm run start:shell",
"start:shell": "ng serve shell -o --port 5000",
"start:all": "concurrently \"npm run start:shell\"",
"serve:dist": "concurrently \"serve dist/shell -l 5000 -s\"",
"build-dev": "npm run build-dev:common && npm run build-dev:core && npm run build-dev:shell ",
"build-dev:shell": "ng build shell",
"build-dev:common": "ng build common",
"build-dev:core": "ng build core",
"build-dev:defaultExt": "ng build defaultExt --configuration dev",
"build": "npm run build:shell",
"build:shell": "ng build shell --configuration production",
"build:common": "ng build common --configuration production",
"build:core": "ng build core --configuration production",
"build:defaultExt": "ng build defaultExt --configuration production",
"test": "npm run test:shell",
"test:core": "ng test core",
"gen-index": "barrelsby --delete -e '.*\\.spec.*' -q",
"gen-index:core": "barrelsby --delete -e '.*\\.spec.*' -q -d core/app/core/src/lib/ -n 'core'",
"gen-index:common": "barrelsby --delete -e '.*\\.spec.*' -q -d 'core/app/common/src/lib/' -n 'common'",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc"
},
But yes, everything you do as custom work is supposed to happen under extensions folder, and that defaultExt is just a facilitator of that. I am not entirely knowledgeable of all this, but I believe that you can override everything in core from there.
Thanks so much @anthony.oak.castro
Hello!
I noticed that the application is not watching my changes in the extensions/defaultExt folder>
Is there something I am not doing right?
My Steps:
I ran
The application builds but it’s not watching for changes. Can anyone please point out my error?
Try adding your own “yarn run” command in package.json with the --watch switch.
Thanks @pgr
I added “build-dev:defaultExt-watch”: “ng build defaultExt --configuration=dev --watch”, to my package.json and still ended with the same result (App built but did not watch)
I tried running ng build core --watch and this successfully built and watched.
Is there any other suggestion on what I can do to have yarn run build-dev:defaultExt --watch work as expected?
Hey @Deal,
On the following
The above is a backend change (php config file). These configurations are cached, so for it to take effect you need to run php bin/console cache:clear or one of the latest youtube videos they said that running repair and rebuild also works.
On the following:
I would not change the package.json, that is not needed. Running yarn run build-dev:defaultExt --watch should work just fine.
But this watch only applies to frontend changes, meaning “angular / typescript” changes. I.e. changes that you do within the extensions/defaultExt/app/src folder.
You can check the configuration for extensions/defaultExt/app/src on the angular.json:
"sourceRoot": "extensions/defaultExt/app/src",
on
"defaultExt": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "extensions/defaultExt",
"sourceRoot": "extensions/defaultExt/app/src",
the above key defaultExt, is the one that is referenced on the package.json, where it says ng build defaultExt
"build-dev:defaultExt": "ng build defaultExt --configuration dev",
...
"build:defaultExt": "ng build defaultExt --configuration production",
So, when you run:
yarn run build:defaultExtIt is using the package.json entry:
"build:defaultExt": "ng build defaultExt --configuration production",And in turn the ng build defaultExt is using the angular.json entry:
`"defaultExt": {`
The same applies to common, core and shell.
They are just using what angular provides. The package.json entries are just a shortcut.
Hey @pgr,
Are you sure about the following for the frontend (angular)?