Assets folder resolution: Running an application within a project not picking up assets - angular7

I created an application within an Angular workspace. When running
ng serve [application-name]
Picks up images and files in asset folder fine. Now I want to run the workspace with just
ng serve
I would expect through having the application lazy loaded the path would resolve but instead I get
zone.js:3243 GET http://localhost:4200/assets/terms.txt 404 (Not Found)
What is the proper setup to access assets of an application within a workspace?

EDIT After talking offline I think we've found a solution. I'll post it here and leave the below for reference even though the original answer I posted doesn't really apply to the problem.
You're trying to run multiple Angular apps and route between them via something like Firebase where you can direct different routes to different apps.
To get this to work locally for development you will need to run each Angular app separately on it's own port. I suggest you control the destination of the route in the environment files. This way when you are running locally you can point to the port the app is running on and then point to the endpoint Firebase uses in production.
Example environment.ts file in your root app
{
...,
OTHER_APP_URL: 'localhost:4201'
}
prod.environment.ts
{
...,
OTHER_APP_URL: '/otherApp'
}
Then in your component
....
import {environment} from '<path to environments file>';
#Component({
selector: 'my-component',
template: '<a [href]="otherAppUrl"></a>'
})
export class MyComponent implements OnInit {
otherAppUrl: string;
ngOnInit() {
this.otherAppUrl = environment.OTHER_APP_URL;
}
}
You will probably need to do something similar in the other apps so you can route from them to the root app or other child apps. You will probably also need to build the other apps with the --baseHref flag when you build for production so their assets are available. See here for more info from the docs: https://angular.io/cli/build
Old answer - doesn't really apply to the question
Looking at your repo I don't see the terms.txt in your root project's assets folder. I checked to see if it was in one of the other libraries in the repo but wasn't able to find it there either.
If this is an asset that is included or referenced by a component or service in one of your libraries you will need to copy that over to the library's output folder as part of your build process since that functionality isn't currently supported by the Angular CLI.
An example of a build script that might do this for you is:
ng build my-lib-with-assets --prod && cp -r projects/my-lib-with-assets/src/assets dist/my-lib-with-assets && ng build --prod
Don't forget that you need to build your libraries before you build your main project.

Related

Mimicking build_runner serve on a nodeJs server

With the expiration of Dartium that happened just a few days ago, I felt compelled to migrate from dart 1.24.3 to Dart2, even though it is still in dev.
I have although hit a few walls doing so, one of them being related to the architecture of my apps.
I run a nodeJs server, which also acts as a webserver with client side dart.
The problem that I experience with the new dart SDK is that in order for the .dart files to be read in Chrome, they must be served using webdev serve or build_runner serve.
Obviously, these 2 commands act as the file server, which is not what I want since I'm using a nodeJS server.
By using build_runner watch I think I am enabling the build and watch of the .dart files into .dart.js inside of the following directory :
.dart_tool/build/generated//lib
I am also able to serve them from my nodeJS server. What remains is the package directory, I can't seem to find where pub serves gets the following package files:
/packages/$sdk/dev_compiler/amd/require.js
/packages/$sdk/dev_compiler/amd/dart_sdk.js
Does anyone know what build_runner serve does to include them?
Thank you,
There are 2 options for using a different server during development.
Run build_runner serve on a different port and proxy the requests to it from your other server. This has the benefit of delaying requests while a build is ongoing so you don't get an inconsistent set of assets.
Run build_runner watch --output web:build and use the created build/ directory to serve files from. This will include a build/packages directory that has these files in it.
These files are served from the lib directory of the dart sdk itself.
Note that there is another option, which is to use the -o option from build_runner. This will create a merged directory with source and generated files, which you can serve directly without relying on any internal file layout.

Is it possible to integrate React (using Webpack) with Grails?

I've been thinking about using React as the frontend for a Grails application, but I'm having a bit of trouble getting started.
So far, I've become accustomed to write a React app using Node/NPM with the help of Webpack, and that's been pretty easy because there is plenty of documentation for that setup.
However, I'm struggling to find anything concrete integrating React seamlessly with Grails.
Ideally, I would just do grails run-app and it should take care of everything. I do not want other team members to worry about starting up two different servers or something along those lines.
Please let me know if anyone has done this before.
Webpack can be configured to work quite well with Grails. The key is to have webpack generate its bundle whenever the app is started up, and to output the bundle in a directory where it can be served from the GSP. You do not want your source JavaScript (I.e, React/ES6 code) in the asset pipeline if your using Webpack, instead you want to keep those source files in another directory (such as src/webapp), and configure Webpack to bundle these files and output the result to the asset pipeline (assuming you're using AP at all).
Here's an example configuration for Webpack:
var path = require('path');
module.exports = {
entry: {
index: './src/webapp/index.js'
},
output: {
path: './grails-app/assets/javascripts',
publicPath: '/assets/',
filename: 'bundle.js'
},
Finally, to achieve the integrated webpack/Grails startup, you can use the Gradle node plugin and attach the webpack run script to the application startup in a custom task in your build.gradle (this is assuming that you have a npm script named "webpack" defined to run webpack)
assetCompile.dependsOn(['npmInstall', 'npm_run_webpack'])
Please note that if you want to run webpack in "watch" mode, you'll need to do that seperately from starting up the Grails app, so that that script can run continuously (there actually is support for this in the Gradle mode plugin but it's currently broken).
See this link for a more in-depth explanation of this approach, with a sample application: http://grailsblog.objectcomputing.com/posts/2016/05/28/using-react-with-grails.html
Also checkout the React profile for Grails 3: https://github.com/grails-profiles/react
It has not been released yet but should be in the next few days. It makes use of the same approach outlined here and in the linked post.
You could use npm's scripts feature to combine all steps necessary to start up the development environment into a single command, e.g.:
// package.json
{
...
"scripts": {
"start": "npm start-grails & npm start-react",
"start-grails": "grails run-app",
"start-react": "node server.js"
},
...
}
Now all it takes is a simple npm start to launch all relevant applications.

iOS Google Tag Manager Integration: How to add multiple containers per App environment?

I completed the integration of the latest Google Tag Manager (v5) for iOS together with Firebase (https://developers.google.com/tag-manager/ios/v5/).
The big change here is that the default container file is not binary anymore, it is plain JSON.
The integration requires that you have a folder (not group!) with the name "container" inside your app workspace. Within this folder the container file should be located. This raises my issue: We have two different GTM Containers, one for the testing/development app and one for production.
By using a folder it is not possible for me to add a different container file and set target references.
I can not create an additional folder since GTM requires the folder on root level and with the exact name "container"
Does anybody have an idea how this can be solved?
Thanks,
Fahim
You should be able to configure an XCode "run script" build step that clears the container directory and copies the correct container into place.
Sample Run Script (if somebody has the same issue):
rm -vf ${SRCROOT}/root_folder/container/*
cp "${SRCROOT}/root_folder/target/test/GTM-XXXXX.json" "${SRCROOT}/root_folder/container/"
It is important that this copy job is done at first within Build Phases, otherwise some other precompiling stuff of GTM does not recognize the container.

Is it possible to change Yeoman's directory structure?

I like Yeoman's features like the Package Manager (Bower), Livereload integration, Compass, etc.
Therefor, I'd like to use it to handle my public website. However, instead of using the "app" folder, I would like to put everything at the root.
I've changed the references in the grunt configuration file but still get errors when installing new package and building.
Is it possible to change the project structure?
Not as easy as it could be at the moment, but we're working on making it easily customizable.
Though I don't think you would need to. You develop in the /app folder and deploy the contents of the built /dist folder. That way it's still in the root on your server.

Trigger.io continuous development

I'd like to know if there is any way to develop continuously with Trigger.io and avoid the forge build step with every file change I want to test in my browser or simulator.
I was faced with the same problem and I've got a working solution that uses watchr and watch to automatically rebuild each time I make a change to a source file. If you are running a "web" version of your app you can make a change to a source file and go directly to your browser and see the effect of your changes fairly quickly depending on how long the build takes.
Prerequisites: Ruby, watchr, Unix 'watch', and a terminal.
gem install watchr.
create a new ruby file for watchr to know what files to monitor and what to do when it sees a change. I named my file 'my_watch.rb': https://gist.github.com/3153167
open two terminals. Terminal 1 will run watchr and Terminal two will run 'forge build ...'.
In terminal 1 run 'watchr my_watch.rb' making sure the path to my_watch.rb is correct and make sure you've edited my_watch.rb according to your setup so that the path inside watch(...) reflects the files to be watched. My example watches all files in the same directory (and beneath) as the my_watch.rb script. You can place my_watch.rb in the 'src' folder of your Trigger.io app if you want to match my example and run watchr my_watch.rb directly from the src folder. Also not the shell command and path in the block need to be updated to reflect your environment. Again, in my example 'my_watch.rb' is inside 'src/' so when a change is detected we go up one directory and call 'forge build'.
I tend to develop actively with the 'web' version of my app so I can just open terminal 2 to my forge project directory and 'forge run web'. When I am testing in simulators and on devices, yes I have to run forge build every time I want to see a change. However, I typically don't have to wait for forge build to finish because watchr kicked off the build as soon as I made a change and it happens pretty quickly.
I know this is not an ideal solution but so far developing new features in the 'web' version first and then implementing in mobile versions has been very smooth for me. I've never needed to kill the 'web' version after a build but I maybe just lucky. As for running build each time you want to test the mobile versions if you are good with your keyboard shortcuts it really isn't bad at all. XCode makes you build and run after changes are made to source code when creating native iOS apps so I don't think Trigger is unique in requiring this build step.
I hope this helps and that my answer isn't too specific to me and my setup.
The build phase makes some changes to your source to enable the forge.* APIs - therefore, trying to just use the raw files in your src directory won't work.
You may be tempted to change files directly in the development directory, but this is a pretty bad idea: we delete those files with impunity when we need to!
We have plans on our medium-term roadmap to add a file-system watcher to start builds automatically when changes have occurred.
In the meantime, I just use forge build && forge run PLATFORM which tends to only take a few seconds...
while not perfect... this works for me.
go into development/web
rm src
link to your root src, ie ln -s ../../src src
copy the all.js from the web/forge and add to your index.html
ie
start nodemon web.js
open in browser.
note you will need to comment out the all.js script tag for non web builds.

Resources