I am appending hash ids to bundles generated by webpack. Whenever I get a new build I see that filenames are changed with new hash and index.html file is referencing these files. But after deploying my app, some users using Chrome don't see the new files until they logout from the app. Does anyone encounter this before, know any solution to fix it?
Related
I want to save an image in angular's Assert folder or in a folder created by me. I occupy the input file and a button, nothing more when I save the selected image, I want it to be uploaded or copied to said folders or folder. Can this be done without the backend?
I have been looking for information and watching videos but most of them either use firebase or some other service, I just want it locally. Please, your help would help me a lot.
If I understand your question correctly, you are asking if, at runtime, you can create a file in your Angular applications' 'assets' folder.
This is not possible, because the 'assets' folder is a compile-time artifact. It only exists in your source code tree. In the compiled application, the assets folder does not exist.
Furthermore, when the folder exists, it only does so on the computer on which you wrote the application. The user is running it in their web browser, which is generally running on their computer, not yours.
Now, if you are just asking if you can save a file on the user's computer, take a look at File Save functionality in Angular
I'm using ReactJS to build a site, and I want to create a link (a href="relativepath") to a local HTML file so that when the user clicks on the link, it'll open up the html page. The local file is in a different folder X outside of the project, and I don't want to upload it into my src folder because the html file depends on a lot of other files in X. Is there a good way to do so?
I also want to upload a different local HTML file that is already within the src folder of my React App. I currently have something like this:
import htmlFile from "../links/htmlFile.html"; export default function Something(props) { return (<a href={htmlFile}></a>)}
and it says in my terminal that
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <html>| | <head> >
I already tried adding in webpack + an htmlLoader, but I think I followed the steps incorrectly as I wasn't able to get it to work. I uninstalled those packages, so I'm now back to square one.
Thank you so much!
Just linking to or importing from a local file in some other location won't work unless those local files are also deployed to the server in the same location relative to the app (and the web server has access to that location).
So you'll need to copy the file and its linked dependencies in a folder that will be deployed along with your react build, but not where it'll get treated as part of the react codebase so webpack will try to compile it (so not in src either).
If you used create-react-app to set up your application, for example, this would be the public folder; other webpack setups may use different names but the general concept is the same.
Using Liquid, I am trying to build a JSON object (skills.json) containing data from all of my Jekyll posts.
When I place this file in my _data folder in my project root directory per https://jekyllrb.com/docs/datafiles/, trying to access the data via site.data.skills with the inspect filter or console log resolves to nothing.
final output section of my Liquid json
When I instead place my skills.json file in the /assets/js/ folder in my root, I do see that the properly populated JSON file is added to my _site folder as expected. Copying this NEW file into the root _data folder successfully populates to my page as intended, and I am able to access all the data with site.data.skills.KEY.
json generated from assets folder at build time
Is there any way that I could specify that the generated skills.json in my /assets/js/ folder be the source for my data call?
Alternatively, is there a way to generate the final data and automatically move it to the _data folder ahead of building the site? I am open to any suggestions for how to automate this. As a warning, I am pretty new to web development in general, so any references or links would be a tremendous help. Thanks!
Following up on this, I believe that the issue lies in how the site is built. The skills.json file gets generated on the first build, and then when it is added to the _data folder, the site gets built AGAIN to update everything that hits that data. With this iterative process, I don't know if it would be possible to both generate the new file and use it as a source to update everything dependent on the data in the same pass.
As far as automating goes, my thinking is that a Ruby plugin to compare the newly generated files against the _data folder and overwrite if the source is different/newer would be the way to go, but I'm still open to any suggestions!
I am using a json file to load some delivery address in my project.This file is getting updated by the client for several time.But whenever I put the new json file to my project location, it takes too many refresh to reflect the newly added address on the browser even sometime I need to clear the browser cache to reflect properly.
I am using Asp.Net MVC4 .Could I control the version of this JSON file using bundle and minification property so that it gets reflected whenever any change will be made?
Or without using bundling,is there any another process so that it can reflects easily with a single refreash.
I found that the following code fragment worked best for me. Since it uses 'require' to load the package.json, it works regardless the current working directory.
var pjson = require('./package.json');
console.log(pjson.version);
When I use yeoman init angular:allto bootstrap my app, yeoman uses the name of the directory I'm calling it from as the name of the main application .js file. I.e. if I'm running the command in /Users/myusername/dev/projects/my-angular-app, then the file app/scripts/my-angular-app.js is created as the main .js file for the app.
If I simply rename the root directory, then using Yeoman to add routes won't work, as it can no longer find the .js file it created. I've tried adding the name of the app as a parameter when invoking the Yeoman init command, but that doesn't work.
I've tried doing the init command in a directory with the name I want the app to have, and then renaming the directory afterwards. But it seems Yeoman reads the name of that directory every time it's invoked, so after changing the name of the directory, Yeoman is no longer able to create routes for me as it can't find the .js file with the same name as the root directory.
How can I make Yeoman use a different name for the my-angular-app.js file?
There's an open ticket about it, please weigh in your thoughts there.
I am not sure if this is possible but you might want to have a look at the Gruntfile.js and replace all the instances in the config were it is storing the old path and replace it with the new path. I am not sure if that will work as I have never tried but it might based on my understanding of Grunt.
I am like you, I like to have things named the way I want which why I don't use Yeoman even though I would love to (like they say, it is opinionated, just too opinionated for me), I have a few custom built grunt tasks that give me most of the functionality I need (mainly auto compile of SASS/TypeScript, minifying CSS/JS, and concating CSS/JS files).
The issue is with generator-angular.
Currently, the app name is taken from the bower component.json file. If you are using the more recent convention of naming this file bower.json, the app name will fall back to the directory name.
Rename bower.json to component.json until support for the new naming scheme makes it into generator-angular.
It looks like these changes have already been made but have yet to be merged into the master branch: renaming-deprecated-component_json