I'm attempting to build my first phonegap application using the phonegap build cloud compiler. In the instructions there it says to remove phonegap.js before uploading... Where is this mystery file? I downloaded the latest phonegap and nothing in the /Libs/ looks right. There seems to be no documentation on how to setup your root HTML page properly to be compiled with phonegap.
"Once you've included the necessary assets, remove the phonegap.js (cordova.js) as Build will automatically inject it during compile time." - https://build.phonegap.com/docs/preparing-your-app#what_do_i_upload
I'm under the impression that I just need to use the JS API for code completion and then let the cloud compiler do its work, but all the documentation revolves around installing an SDK for each platform. I don't want to use xCode or eclipse-- I just want to write javascript.
What is the bare minimum resources I need to include on my root HTML file?
What is the bare minimum resources I need to include on my root HTML
file?
You need just 2 files: index.html (may be the name "index.html" is configurable in the config.xml, I am not sure) and config.xml.
Here is a starter app: https://github.com/phonegap/phonegap-start, take a look in the www folder.
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.
Ionic 4 CLI is seems to be friendly only with Angular7. And Angular7 is slow like.. send for compile and go take a shower and back and maybe the bundle will be ready. Actually the worst framework the front end ever met.
AngularJS is probably the best happened to front end world. Everything is fast, reliable, straight forward. When you combine this with Webpack you can enjoy an high level of programming language including exports and imports and classes and and components just everything else you need.
However, the Ionic CLI doesn't integrated with something else than the Angular7.
So I have tried to create a cordova based project using:
cordova create test
And then tried to "manually" setting things up.
I have installed Webpack in the cordova based project so now it's accessiable through the node_modules folder. Then I have created the webpack.config.js file in the same directory.
Then I have created src directory which stores the webpack.entry.js file. The webpack.config file reads what the entry file created and creates a new folder called www and there it places index.html file and bundle.js.
Then I am trying to run cordova run --device with Android device connected and the app is getting actioned in the actual device.
Very nice.
However, I have some issues: it seems that the files that are in the bundle doesn't going to be work since angularjs is not completely served.
I mean, in order to serve an angularjs app you probably need a static server or serve it via node. In this case this doesn't happening so it just like drag the index.html file to the Chrome browser and have it not working at all.
I have searched tons at Google but found just nothing.
Is there any boilerplate working with Cordova + Webpack + AngularJs + Ionic framework's components, working fast with livereload?
Im trying to include this library into my electron app and it works when I start my electron app in development mode (electron-forge start). But when I build my app using electron-builder --win I get an error saying Date.today is not a function.
I included the library in my index.html like so
<script type="text/javascript" src="js/Datejs/build/date-de-DE.js"></script>
Having not seen any code or folder structure, I am going to take a guess and say that when your app is built, Electron doesn't see the path to js/Datejs/build/date-de-DE.js because it's running directory is in a different folder than the js directory. In other words, the js directory was most likely excluded from the build process.
Are you sure that you are including all the right files in the build process?
Check out the documentation to see how to set the config to include different files
In all examples for famo.us the required scripts are loaded directly from the famo.us website.
The download link at the top right of the homepage gives you an example for a boilerplate, which also contains the download of the required files from the cdn.
<script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>
...
There is no download for the needed includes on the site.
Is there a way to program an offline version of your apps?
Your Question is valid but might be better worded as "Is there a download of the Famo.us javascript library in it's entirety?"
As of this Answer, there is not a download of the library unless you download it yourself from the cdn links. This is feasible and would work fine. But that is not the purpose of how you should probably use the library except for doing a proof or example.
The intention of the library is to create a leaner build by using the scaffold project created by the Yeoman generator generator-famous to scaffold a grunt and bower project. OR Another package to create the leanest project build for your application.
Here are some options:
Famous Tools Dist Generator (Tools to create a local copy in different builds)
Famous Seed (Create local project using the generator)
Browserify Seed
Webpack Seed (Not official, but in review by Famo.us)
They are working on that, but it might take a few weeks.
Your best bet is to simply install all needed resources and generate the sample project yourself. This takes about 2 minutes of your time and you will have the source code of all resources available.
Here is a step by step guide: https://www.npmjs.org/package/generator-famous
I agree that there is no a downloadable package that allow you to work with project relative links. But it is simple to achieve, just navigate to the link "http://code.famo.us/lib/require.js copy the code, place it into your javascript usual folder and you can work offline with it by having the src attribute pointing to that file. You also need to have the style sheet or your tests will not be visualised as you expect.
I'd like to start bundling our javascript files. I've found that it's really easy locally using the web essentials plugin, however I need to set up the build server to generate the bundled .js file.
I'd rather not check this generated file into TFS as it will cause conflicts for our developers, and also since it's generated from the source I feel that the server build should generate it.
Is there a command line utility for doing the script bundling outside of visual studio that could be used as part of a build script? My google-fu is failing to find one.
Many thanks,
As long as you wrote it as proper AMD modules, require.js comes with a tool to turn all your files into an optimized bundle.