Meteor has a great file loading policy for general development. It automatically loads files from the app directory with some special treatment for public, private, client and server directories. (See http://docs.meteor.com/#structuringyourapp)
When loading third-party Javascript libraries into a Meteor app, I usually put them in a <head> script or directly in the client/compatibility directory, which works well for released files.
However, sometimes I need to link a developing version of a project directly from a GitHub repository from a certain branch, when testing patches or pull requests. I already do this all the time for Meteor smart packages which are picked up transparently. However, I'm not sure how to do this for general (client-side) Javascript libraries. Moreover, it's the linking in of a repo rather than a listed version that is tricky. Can someone who has had to do this give suggestions?
One approach to this was briefly described in https://github.com/meteor/meteor/issues/1229.
I found that this can be cleanly implemented as a resident smart package in your app. This approach works well in Meteor 0.6.5 and any future versions until this API changes. First create the following in package.js:
Package.on_use(function (api) {
api.use(['routepolicy', 'webapp'], 'server');
api.add_files('client.html', 'client');
api.add_files('server.js', 'server');
});
and in server.js, you declare that you want Meteor to serve up an entire directory (the appropriate part of the repo) as part of the app (in my case, OpenLayers):
connect = Npm.require('connect');
RoutePolicy.declare('/lib', 'network');
WebApp.connectHandlers
.use(connect.bodyParser())
.use('/lib', connect.static("/home/mao/projects/openlayers/lib"));
finally, client.html tells your app to load up the code in the right path:
<head>
<script src="/lib/OpenLayers.js"></script>
</head>
Assuming the above package was in a directory named openlayers, commenting or uncommenting openlayers in the package file of my app allows me to switch really easily between compiled releases and running from repo for this package.
Related
I'm afraid this will be a stupid question. But I don't manage it to use my JS-Package (for example jQuery), which i have installed with Visual Studio Nuget-Package-Manage in my .net 5 Blazor Server-App.
What i did:
Installing the Package. Here I installed jquery.datatable which includes jQuery itself:
Image of my Project
But now, i don't know how to include it for example in my "_Host.cshmtl"-File:
<script type="text/javascript" charset="utf-8" src="???WHERE IS IT????"></script>
Where is my *.js-File? For example: query.dataTables.js ??
I found it on "C:\Users\xxxxx.nuget\packages\jquery.datatables\1.10.15" and
"C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"
Do i realy have to copy it to my wwwroot-Folder manualy?
If so, why i should use the package-manager?
Thanks for your help!!
Traditional web applications using JavaScript normally load the file from a local folder or from a web CDN (e.g. CDNJS.com etc). This is then loaded from the page (often referenced from a layout file).
Early on it used to be the case that JS libraries could be loaded via NUGET packages but this approach is now discouraged. It had to fix the creation of the script in a set location, e.g. /Scripts and there was no flexibility. Almost all client-side libraries are now in NPM as packages or on CDNs like cdnjs.com.
The current approach for .NET web apps to load client-side assets is either use LibMan or NPM and have some sort of webpack arrangement to compile/pack/copy. You would never load the JS from a /packages folder in the way you suggested.
Blazor Approach
Blazor (since .NET 5.0) can load either embedded JS modules (from your code), or from a URL directly.
If you want to package some JS with your application you should look at Razor Component libraries. This allows static assets such as JS files to be embedded in the code, which Blazor makes available via the _content route, e.g.
_content/LibraryName/myfile.js.
Because Blazor is a SPA you don't include JavaScript using a <script> tag in your HTML, you should load it as a module and reference it there.
This documentation explains it:
https://learn.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor-javascript-isolation-and-object-references
DataTables, JQuery
So should you include jquery.min.js and jquery.datatables.min.js in your library? I'd suggest a better approach is to load from a CDN - your package is smaller and there is a chance the URL is already cached and loaded, e.g.
var module = await js.InvokeAsync<IJSObjectReference>(
"import", "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js");
This loads the module on-demand from the URL directly. You'd also need to load jquery before this.
Finally I'd make this observation: are you sure you want to go down this route?
There are several native Blazor libraries on NUGET for rendering and handling tables. You'll find it much easier to go this way rather than try to patch jquery-based libraries into a Blazor app.
I had a similar issue. Not with the same libraries, but I was wanting to do something that wasn't available in a Blazor library yet. I needed a video player that could handle a certain format that the default HTML 5 video element can't handle. There is an open source player, videoJS , that did the job, but it's a javascript library. It's available on npm and there are cdn's - however the plugins (as far as I could tell) weren't on CDN - so I had to go down the npm route.
When you install an npm package it puts it into a hidden node_modules folder. Unfortunately even if you point to that path or even copy the file in with your other js files it won't work. Npm packages are designed to be run by nodejs, rather than directly in the browser. In order for them to run in a Blazor app (in the browser) you have to do an intermediary step of transpiling it into a browser friendly format.
What I really wanted was a re-usable component, that wrapped the javascript.
It took me a while to get there but I finally figured it out. I've written a series of articles on my blog detailing it. The final one ports everything into a Razor Class library that can be consumed with no knowledge of the underlying js. The fourth article deals with importing npm libraries and using them within a web assembly app. I'll put the link below but essentially the process is:
Create a folder eg JS and initialise it for npm (npm init -y)
Install the required npm packages (npm install --save)
Create a src folder within the JS folder that that you will put your own js files in
Create an index.js file in src that imports the required javascript modules and exports what you want to consume
Install snowpack (npm install snowpack --save-dev) (or webpack but I found snowpack seems to work better)
Configure snowpack to process the contents of the src folder into wwwroot/js (without snowpack or similar the files in the npm package won't be in a browser or blazor useable format)
use javascript isolation to pick up your index.js file from wwwroot/js
See blog post here for full details (It's part 4 of a 5 part series - part five puts it all in a razor class library so you can add it to a project without ever seeing the javascript)
I know this is late but this SO question was one I kept coming across when searching on how to do what I wanted, so thought I'd put my solution here in case it helps anyone else searching for what I did.
When I’m looking at some github projects and tutorials I look at the package.json file and see frontend frameworks listed as the dependencies quite a lot. I don’t get it. I thought Node was backend? My understanding is that to install frontend frameworks you dl them directly from their website or github or use a CDN then link them in your pages - all this has nothing to do with Node.
Even if I did install a framework through Node doesn’t it save it to the node_modules folder? There must be a reason for it as I’ve seen a lot of projects list them in their package.json file. Can anyone explain this to me?
NodeJS is not only a "server" in the sense that it is a programmable webserver, it is a JavaScript runtime. You can use it to serve webpages, but you can also use the NodeJS server as a parser / generator for JavaScript (meaning: reading and writing files on the system). If you use one of the frontend frameworks like react and angular, you install the packages just to get their sourcecode and not to actually run the code on the server. Then you use a bundler like webpack to turn the code you've written and the code from the modules into one (or multiple) large chunks of minified frontend code. You can usually find those generated files inside the /dist or /build folder. Now to get these files to clients, you can use NodeJS as a server too, serving the files to the clients. That way, the packages "installed" on your server end up on your client.
I'm struggling how to integrate client-side modules like - just as an example - Apollo Client
into the qooxdoo-specific generate.py workflow so that they become available in the browser.
According to the installation notes:
To use this client in a web browser or mobile app, you'll need a build system capable of loading NPM packages on the client. Some common choices include Browserify, Webpack, and Meteor 1.3. [...]
Side note: I currently use Babel 6 to recursively transpile all my sources from a separate folder source.es6/ into the "official" source/ folder, which is then watched and processed by generate.py. Is it possible to use this somehow as a solution to my question?
OTOH, I would love to see at least some kind of integration with Webpack, Browserify or SystemJS.
I suggest you do the following. First, create a loadable package(s) from the Apollo Client and its dependencies, e.g. using Webpack. Then make sure these package(s) are loaded in your web page before you load your qooxdoo app. Then the Apollo API is available to your qooxdoo code.
If you choose to deploy the Apollo packages with <script> tags you can let generate.py do that by using the add-script config key.
I suggest you place the output of the Webpack run in your qooxdoo project's resource path and add #asset hints for those files in your main qooxdoo class. This will make sure they are copied into the build version of your app, and you can use the relative URI to these files, either in your index.html directly or in the add-script config settings.
I don't think your transpiling with Babel6 will help here. The Apollo code is already consumable and you woudn't want to disect it and make it part of your qooxdoo (es6) source tree, let alone its dependencies. I would rather treat it as a shrink-wrapped JS library as I described that is added like a resource.
I am studying Aurelia following the starter kit. In detail, I have selected the option of TypeScript and I complie them in Visual studio 2015. At present, the example applications work well on the local web server, IIS. Now I want to test it on an internet web server where I usually put my static html files and some php and ruby pages. Probably, the server is an apache managed by some IT company.
As I am very new to this field, I just plan to put the top folder of the local file system together with its all sub folders into somewhere in the web file system of the internet server.
Then the question is, will it work normally? I feel other options are too complexed for me to achieve at present. Or is there other simple alternative way?
I read a similar question here, but the anwer instruction is to difficult for me.
This article http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.2.4/doc/article/bundling-your-app-for-deploy teaches how to bundle your app for deployment. In short, it will transform your app in a couple files (usually 1 .html and 2 .js).
To bundle your app, run gulp export. It will create an "export" folder inside the application folder. Then, just copy and paste those files in the server and the app will work normally.
I'm trying to work out the correct way to embed an AngularJS application into another web page (served by another app). I have two apps, running on different servers:
App 1 - PHP app
App 2 - AngularJS app (calendar widget of sorts)
The PHP app is the primary app, into which I want to embed the calendar, which is served from a remote server. I have full access to both servers, and to both apps. The idea is that I want to be able to re-use the Angular app elsewhere, so it needs to be as loosely coupled as possible to the PHP app, preferably embedded in a single line of code.
I am currently using a HTML5 tag, which seems to work well, but I was wondering if there's anything wrong with this approach, or if there's a better means of doing what I'm after.
I should mention that I'm happy to use a HTML5-only solution, I'm no worried about backwards compatibility with older browsers.
No iFrame solutions, unless there's a REALLY valid solution. My ultimate goal is to head towards a microservice-style architecture.
Thanks in advance for your help.
I generally manage all of my client-side dependencies with Bower but you could use any package manager.
This is how I would do it with Bower, which just uses Git to pull down your dependencies. This solution would require you to know how to use Git.
Install Bower—see above link.
Then, create a file called bower.json at the root of your project that points to the Git repository of your project:
{
"name": "my-php-app",
"version": "0.0.0",
"dependencies": {
"my-angular-app": "git#bitbucket.org:MY_BITBUCKET_ACCOUNT/my-angular-app.git#master"
}
}
Then you can run the following command in the root of your PHP project:
bower install
This will create a directory called bower_components at the root. You can configure the default directory.
Your application should be self-contained there. You can import it and all of its dependencies with PHP on the required page.