I would like to know how can I reference different javascript files on my html page in Visual Studio which reflect the appropriate environment - local dev vs. deployed (on Azure)
For example, when I am developing locally, I have something like this at the bottom of my <body> tag (abbreviated dummy names used)
<script src="js/local-1.js"></script>
<script src="js/local-2.js"></script>
<script src="js/local-3.js"></script>
When I am ready for deployment, I leverage grunt to concat and minify these files. The script I reference will now look as such
<script src="js/concat-and-minified.min.js"></script>
This works fine, but I am left with the manual process of ensuring I deploy the correct html page with the deployed script reference, then when interested in local development, I change it back
Surely you can see this is tedious and I think qualifies as an unnecessary step, but I am unable to find a way to achieve this.
So, is there a way to select which <script> tags exist on my html page depending on the environment of the site? Furthermore, is this primarily even an IDE consideration, or am I missing some other factor?
Additional details
Though this is in Visual Studio, the front end project is strictly Angular with a single page html file, so any sort of MVC bundling or .cshtml if/else logic is not applicable
Related
I am trying to publish a Google Chrome Extension. Before doing it, there is a form to fill:
I am unsure about how to answer. The extension does use a bootstrap CDN via:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
On the side it says:
Remote code is any JS, Wasm, or CSS that is not included in the extension's package. This includes references to external files in tags, modules pointing to external files, and strings evaluated through eval()
Is this CDN use considered as remote code? Is it considered a module pointing to an external file?
Yes, remote code would include CSS files served by a CDN. There are various areas in the Chrome Extensions documentation that specifically define remote code as any code not bundled in your extension. They even include "Any library hosted on a CDN". In fact, they actually specifically reference Bootstrap on the Remotely hosted code restrictions page.
Although CSS is not something blocked by the new Manifest V3 restrictions on remote code, including remote code can make the review process take longer. Instead, it's better to include the library bundled with the extension (assuming the library's license allows it).
I'm a beginner using NodeJS. I'm using a plugin for video-js called videojs-playlist. The docs say to include it like this:
<script src="path/to/video.js/dist/video.js"></script>
<script src="path/to/videojs-playlist/dist/videojs-playlist.js"></script>
What exactly is the path/to supposed to be if not root/node_modules or something like that? How am I supposed to access those files from an ejs view? I have installed both video-js and videojs-playlist using npm.
Right now I get redirect errors on my page because it's not finding the file from the paths I've tried.
If the path doesn't have a / at the beginning, then the path is relative to the file the <script> tag is in; otherwise, it is relative to the site root -- which may mean different things depending on if/how you are bundling/deploying your javascript.
For a simple case, if you have the script tags in an index.html, and you copied video.js to the same directory as index.html, you would reference by:
<script src="video.js">
If you are using Node to test things out on your personal machine, you could reference a file relative to your HTML file and node_modules directory; however, this wouldn't really be the best in the context of deploying and managing a real application.
Node gives you require() to import modules from dependencies you've installed without needing to specify their exact location and directory structure, but it looks like this particular plugin may not have given you that convenience here.
It looks like you are in need of a bundler. One widely-used and well-documented bundler is webpack, but there are others such as parcel and FuseBox. These can all serve your needs.
These tools are most likely what the videojs-playlist README on GitHub is referring to when they say:
Include videojs-playlist on your website using the tool(s) of your choice.
Among other features, these tools can take a file from one of your node_modules dependencies, and "bundle" relative your javascript application (however you desire), so that you don't have to carry around some pre-installed giant node_modules directory everywhere with you -- you only take what you need with you and structure it the way you want.
When you build & run YUIDoc it gets some of his resources from http://yui.yahooapis.com/.... These resources include the stylesheet and yui.min.js.
How can I download and use these resources offline?
The reason for this is because we run our docs on a HTTPS server. The YUIDoc serves his files always over HTTP protocol.
I had the same problem and I really don’t understand why the don’t have a valid certificate for yui.yahooapis.com. Here’s what works for me (with YUIDoc 0.5.0):
Create a custom theme
First of all, you’ll need to create a new theme that overrides some parts of the default theme.
Create the following folder structure:
my_theme
├── assets
│ ├── css
│ └── yui
└── layouts
Modify the main layout
To avoid loading the remote CSS and scripts, you need to alter the main layout.
Copy the file called main.handlebars from the original theme to your my_theme/layouts/ folder. If you installed YUIDoc via node, the original file is located in node_modules/yuidocjs/themes/default/layouts/. Alternatively, you can grab it from the yuidoc GitHub repo.
Make the following changes in that file:
1.) Replace the link tag referencing the remote stylesheet:
<link rel="stylesheet" href="{{yuiGridsUrl}}">
<link rel="stylesheet" href="{{projectAssets}}/css/cssgrids-min.css">
2.) Replace the script tag referencing the remote YUI library:
<script src="{{yuiSeedUrl}}"></script>
<script src="{{projectAssets}}/yui/build/yui-base/yui-base-min.js"></script>
Add a local copy of the remote assets
1.) Fetch the CSS from Yahoo’s CDN
Download cssgrids-min.css from the Yahoo CDN and put it in your my_theme/assets/css folder.
2.) Download the YUI 3.9.1 library
Download YUI 3.9.1 from http://yui.zenfs.com/releases/yui3/yui_3.9.1.zip (Release Notes) and put the build folder from the archive to my_theme/assets/yui.
Build your docs
When building your docs, make sure you specify your custom theme:
$ yuidoc my_js_folder --themedir my_theme
Possible improvements
Since this adds a bunch of files to your project, it might make sense to dive a little deeper into YUIDoc and see which YUI modules are actually required and remove everything else. Also, combining the files would be desirable (the library served form Yahoo’s CDN does this and it should be possible to get this working locally as well).
I cannot get the Visual Studio 2012 Adapter to work. I'm only posting this question after several unsuccessful hours trying to get it to work. The .html file is being generated correctly but the results don't show. The context menu runner works - it displays results correctly in the Output window.
I notice when I look in the source of the generated .html file the references are to the jasmine files (and others) in the extensions directory. When I ran the page using chrome dev tools and stepped through the code there was an error because the JavaScript could not access the file path (which is what I would expect).
I'm planning a full JavaScript app for my next major project (node backend) and I would like to use Visual Studio for its testing tools and this would have been very useful but I don't want to spend any more time on this hence the reason for posting here. My question is similar to this one ...
Chutzpah in Visual Studio 2012 Not Scanning HTML Test Harnesses
The reason I've posted again is because I am not using an html page and I thought the other question was for something slightly different (although I may be wrong). I was following these instructions initially ...
http://www.youtube.com/watch?v=meJ94rAN7P8
I have never asked a forum question before so if I'm breaking a rule its unintentional and I'm sorry.
I have a webapp that I am making using scala/lift and jetty in the IntelliJ Idea IDE. I have a javascript debug webapp that I designed for .net frame work although all I used the .net server for was to serve it because it runs strictly in in html and javascript. I want to use my debug tool for pages that are served by the lift/scala/jetty server and I am currently porting it so that it will work on the new server. The problem that I am having is that the html pages in my debug tool import external javascript files like so:
<script type = "text/javascript" src = "jsFile.js"></script>
now this seemed to work at first but when I made changes to the src javascript file they were not happening in the page that was served by lift. I verified this by following the link in the view page source page from the browser and it showed the version of the file before I added it into the project. If I change the name of the file in the file system the IDE recognizes right away that it can't resolve the path to jsFile.js. I have tried serving the pages through the site map as well as dumping my project in the /static directory. I have restarted, browser,ide, server, os. I have rebuilt the project, remade the module and have done a synchronize. I have created a new project from scatch and ran into the same problem. I believe that if I where to dynamically use lift to insert my javascript with JsRaw it would fix the problem but I still want to know why this isn't working in case its something that I'm doing wrong that will rear up bite me again someday. Any thoughts would be greatly appreciated.
In your template, try to enclose your tags with the lift tag with-resource-id
like
<lift:with-resource-id>
<script type = "text/javascript" src = "jsFile.js"></script>
</lift:with-resource-id>
If this does not solve the problem, are you using SBT to build your lift app? If this is the case, you can have one terminal running
~prepare-webapp
which basically watches for changes on scala files as well as html/css/js files and updates the running jetty (which has to be started by sbt as well running:
jetty-run