I'm using the Browser Sync CLI to serve some basic html/css/js files and it is telling me to manually include the js script in the html files.
If I was running this with node I could use the bs-snippet-injector plugin, but it doesn't look like I can use plugins with the command line tool.
I'm trying to keep this as simple as possible.
I figured it out, I wasn't using the --server option; I included that and it works as expected.
Related
so I am making an application that requires a backend API, and it uses certain node_modules which don't work when compiling with Electron. To fix this, I put the API code into a separate JavaScript file, which I am attempting to fork using child_process.
I have gotten this to work when compiling, but it immediately stops working after I move the "win-unpacked" folder or try to install the app using the compiled installer.
I have checked, and it is not the path that is wrong, it is correctly pointing to the file. From testing, it appears that the file actually does get forked, but immediately exits with the status code 1.
I can't use require(./filepath.js) because that will just include the code in the compiler, which doesn't work with the modules I am using.
I am hoping someone knows what is wrong and what I should do to fix it, or have any ideas for other ways to run the server code without including it in the compiler.
I am using Vue.js 3 and vue-cli-electron-builder version 2.1.1
The server I am attempting to run is a express server.
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.
After reading the document of i18next, I am still confused about how to init & use it in both navigator auto detecting way and event trigger way.
Do I need to include it with <script> tag again if I have had npm install it?
Totally novice in npm, thanks for helping me out!!!
To use libraries installed with NPM in the browser, you traditionally need to use a build tool like Browserify or Webpack. Asking how to use an npm library in the browser is too broad of a question for StackOverflow.
If you aren't familiar with those tools and want to get up and running quickly, you can just include browser ready Javacript file in a script tag. Hit the "Raw" button, download the file, then include the downloaded file in your project like any other script file.
While trying to learn javascript, I stumbled upon Typescript and decided to rather learn that. I installed Atom and the atom-typescript module and coded a typescript class, which compiles to a .js file. I created an index.html page with the .js in a script tag.
As far as I understand, in order to test the js code, I have to start a webserver and load index.html.
What would be a convenient way to do that? At least, I would like to manually run the script from Atom with a keyboard shortcut. Ideally, I would like the browser to refresh every time the typescript file changes in Atom.
No google result I could find explains how to do that, is that a difficult thing to do?
What would be a convenient way to do that?
Use browserify to reload your webapp everytime the JS changes. Also use nodemon to restart your webserver each time the backend JS changes.
Example:
Checkout http://typescriptbuilder.com/
Nodemon config:
https://github.com/TypeScriptBuilder/tsb/blob/master/nodemon.json
Wepack config:
https://github.com/TypeScriptBuilder/tsb/blob/master/src/webpack.config.ts
Webpack config during devtime:
https://github.com/TypeScriptBuilder/tsb/blob/8a7d48d71a8327d48822fa15eb52b9adb1953223/src/server/devtime.ts#L15-L82
Is it possible to use the dart:js library without having a html file to load the js files but some alternative way of loading the javascripts in the context?
I need this for a command-line app, so having a html file makes no sense
When you run a command line app in the DartVM there is no Javascript VM, so you cannot use Javascript libraries.
However depending on your use case, you could run your javascript code with node.js, and communicate with the DartVM using sockets.
Perhaps add some more details about your specific use case.
Update:
To run lessc from Dart, first install node.js.
Then Install lessc:
npm install -g less
lessc styles.less styles.css
You can then call lessc from Dart using dart:io Process.run().