I am trying to add underscore to my mean.io application. I'm not sure where to link the js library to the page as it doesn't have a main html page like the Angular generator does.
I manually added it via the config/assets.json file and it works however the dev server keeps crashing saying _ is undefined (even though the web app uses the _ function ok and returns the data just before the dev server stops).
I asume I must be doing this wrong.
What is the correct way to add custom js libraries to a mean.io project?
In your package app.js file add
<your package>.aggregateAsset('js', '../<path_to_js_lib in "public/assets" folder>',{
absolute: false
});
Related
We are trying to use Cobalt (20.stable) browser as the browser of our web SPA application.
My requirement is to be able to change URL at runtime, what I was able to find in the code:
Is:
starboard::shared::starboard::Application::Link(const char* link_data)
which ends up sending:
kSbEventTypeLink
Unfortunately this is not working, as code is ignoring the call; the handling reaches the point:
// TODO: Remove this when terminal application states are properly handled.
if (deep_link_event->IsH5vccLink()) {
browser_module_->Navigate(GURL(deep_link_event->link()));
}
In my case I m trying to change the URL to let say https://www.example.com.
There should be a way to do that as when navigating we can always have a link that will cause the browser to go to some URL?
Porting layer is not supposed to control navigation directly. Instead, your Starboard implementation may send a deep link event which could be intercepted by a web app which will perform a navigation. See h5vcc_runtime.idl for Web API.
That said, if you are building an SPA, why do you even need to change a URL? Initial URL of a web app is controlled by --url command line switch.
When you say runtime are you looking to change the initial URL when the app is first launched? If so, you could just use the --url parameter.
So you could do the following:
cobalt --url="https://www.example.com"
I did a patch to allow changing the URL.
I just need to call starboard::shared::starboard::Application::Link("https://www.example.com").
Inside this call a DeepLinkEvent is posted.
Patch : https://gofile.io/?c=9GvNHX
Cobalt does not navigate for you. The JavaScript receives the deeplink with the function it sets on h5vcc.runtime.onDeepLink and then does whatever it wants with that. As a SPA, it will parse the URL and load new content from its server in its own internal data format (e.g. protocol buffers, JSON, etc.) which it uses to update its own DOM to show new content.
Navigating is not the point of a SPA since that makes it not be a single page application. However, there may be cases such as a loader app that will want to make some initial decisions then load the actual SPA. That loader app would have to have the appropriate CSP rules in place, then set window.location to the URL of the page to navigate to.
Note: The code you found in Application::OnDeepLinkEvent() is a remnant that previously supported the H5vccURLHandler, which was removed in Cobalt 20. It's not meant to navigate to arbitrary deeplinks.
I have encountered a strange problem when using angular 2 beta RC.
Events get postponed if I include an external script I wrote into any angular 2 project:
<script>
(function(r,a,k,e,y,o,u){r['RakrWidgetObject']=y;r[y]=r[y]||function(){
(r[y].q=r[y].q||[]).push(arguments)},r[y].l=1*new Date();o=a.createElement(k),
u=a.getElementsByTagName(k)[0];o.async=1;o.src=e;u.parentNode.insertBefore(o,u)
})(window,document,'script','//cht.technology/rakr.js','rakr');
rakr('//localhost:3000', 'RAKR-000001');
</script>
Take github project thelgevold/angular-2-samples for example, once I add the below script as I did in https://github.com/tan9/angular-2-samples/tree/event-postponed branch.
The angular 2 application starts to behave strangely, some event changes won't be taking into account by angular until I trigger another event manually, I have to click a button twice to get correct rendering as this recording I uploaded to imgur
I don't know what's happening to the external script I wrote, it's a simple project that only depends on html2canvas and es6-promise, which can capture screenshot using html2canvas and send it to another web service. The bundle was built by webpack, and I tried to build the bundle by using browersify, with no luck.
This is a caveat with how Zone.js works. Zone.js patches async browser events and provides an API in which Angular uses to determine when changes happen and when to run change detection in order to update the UI.
In the case of your third-party library that uses the browser Promise API, it needs to be loaded before Zone.js is loaded via script tag. This is so that async events are patched so it will be run in the "zone" that Angular runs in. Events running outside the zone won't be picked up unless change detection is run manually, or the event is run in the context of the Angular zone.
As explained by brandon, make the code run inside Angulars zone
inject NgZone
constructor(private ngZone:NgZone){}
...
this.zone.run(() => ... /* code here that modifies Angulars model from the outside */);
You can also get the zone outside Angular
bootstrap(AppComponent, ...).then((ref => ref.instance.injector.get(NgZone));
(Not sure if this is 100% correct, I'm just on my phone and looking up is cumbersome. Please post a comment if you can't make it work.
I am developing a simple CRM app using Laravel 5.2 and ReactJS. Previously I was using them independently, but now I want to try to combine them together so Laravel will be my API and front-end will be all in ReactJS.
As far as I know when my app is ready to go live I will serve my master view which includes root div, bundle.js etc.
When it comes to development part I am a little confused. I really love react hot reload, but for now I had to do a little walk around to make this works.
I run two servers side by side. Webpack-dev-server and homestead, so I am able to do calls to my API. But I also have to have additional index.html for webpack-dev-server. When i change something in my index.blade.php view I also need to change this in this index.html and this is a little bit of pain.
Is there any cool trick that I can apply to improve my workflow? If there is any example please provide me a link, because I wasn't able to find one. There are many small todo apps that doesn't really solve my problem.
PS. Currently I am using this approach https://github.com/sexyoung/laravel-react-webpack
#UPDATE
Well I think I have found an acceptable solution. I will stick with webpack server configuration that I have provided in my question (it is really great cause you can use hot reload + you api calls are redirected to backend port, so instead of localhost:8080/api/user... you call /api/user/1), but I have also developed a simple elixir extension that compiles php to simple static HTML page which solves the problem of editing two index files (we all know programmers are lazy).
var php2html = require("gulp-php2html");
var gulp = require("gulp");
var rename = require("gulp-rename");
var Task = elixir.Task;
elixir.extend("php2html", function (message) {
new Task("php2html", function () {
return gulp.src("./resources/views/index.blade.php")
.pipe(php2html())
.pipe(rename('index.html'))
.pipe(gulp.dest("./"));
})
.watch("resources/views/index.blade.php");
});
elixir(function (mix) {
mix.sass('app.scss');
mix.php2html();
});
So at the moment I have two index files:
index.blade.php in resources/views which is resolved by the router on production
index.html in root of my application folder which is used by webpack-dev-server for development
and of course now these files are sync cause of gulp watch :)
If there is any better approach let me know guys.
I have usually solved this problem (duplicated index.html/php file) using this webpack plugin: https://github.com/ampedandwired/html-webpack-plugin
The idea is the opposite of yours I think. Instead of compiling your php files into static html, you can use the HtmlWebpack plugin to output a index.tmpl.php file (or whatever extension you need) using the filename configuration option. Normally I set that path to be the templates folder of my application server.
I believe this approach is generally easier than doing the other way round.
Using this plugin has other benefits, such as automatic bundle script tags injection depending on your Webpack output config, and automatic cache-bursting file hash added to the script tag urls.
In Visual Studio, I have one project that is an Angular application and a second project that is ASP.NET Web API. I am just starting work and don't want to post anything to production. Is there a way within Visual Studio to setup the Web API project so I can call it? I tried this:
$http.get('http://localhost:45620/Sample.WebAPI/api/unitSizes')
.then(onSizeRetrieveComplete, onError);
And several other variations of this, but I keep getting a 404 (not found).
Any suggestions?
OK I figured this out.
Several things have to happen to make this work:
Set the Solution Set Startup Projects to start up both projects.
Set the Web API project properties Web | Start Action to "Don't
open a page."
Remove the name of the project from the url in the
sample code. So it then looks like this:
$http.get('http://localhost:45620/api/unitSizes')
.then(onSizeRetrieveComplete, onError);
Ensure that, if using a plural name, you use the plural for the
controller name as well (UnitSizesController).
That did it for me. Hope this helps someone else ...
Don't code your javascript directly to your localhost, you will have a hard time publishing to production. Use a relative Url instead,
$http.get('/api/unitSizes')
.then(onSizeRetrieveComplete, onError);
I recently just started to migrate over a CI application to Amazon's EC2 service. To test I set up a micro instance of ubuntu and a LAMP stack. PHP, MySQL, HTTPD are all working beautifully. The one issue i'm having now is that when I run my application I receive an error saying that my helpers won't load. The helpers in particular that aren't loading are the ones in subdirectories in the helpers directory ie: /var/www/system/application/helpers/subdirectory/foo_helper.php
The helpers are being autoloaded and in my autoload.php config file they are written like:
$autoload['helper'] = array('subdirectory/foo', 'foo2',...);
Has anyone run into this issue, or have any pointers on where I could go look in my configuration to resolve this?
Thanks for the help!
I'd try debugging the helper function of the Loader class, in particular these lines :
system/libraries/Loader.php
elseif (file_exists(APPPATH.'helpers/'.$helper.EXT))
{
include_once(APPPATH.'helpers/'.$helper.EXT);
}
This is the code that will be hit when including application helpers. Check what path CodeIgniter is trying to include. Double check that the path exists - everyone makes typos now and again ;-)
I think the issue is that when I moved from Windows to Linux I forgot to take into account that linux is case-sensitive. So now I need to go through and rename my files and folders.
But this still doesn't solve the issue where it seems like the page is being cached and I'm not able to refresh and see my changes. Is there any way to force the page to grab a fresh copy from the server on every refresh?