I have an Angular app where I am loading some static data from a file under assets.
urlDataFile = './assets/data.json';
data: any = null;
constructor(
private _http: HttpClient
) {
this.loadData().subscribe((res) => {
this.data = res;
});
}
private loadData() {
return this._http.get(this.urlDataFile);
}
This works absolutely fine for me for truly static data.
When I build my app for distribution, the data gets packaged into the app.
However, once deployed, I want to be able to publish an updated data file – just (manually) updating a single file into the deployment location.
In an ideal world, I would like to develop with a dummy or sample data file (to be held in source control etc.), to exclude that file from deployment, and once deployed, to push a new data file into the deployed app.
What is the standard convention for accomplishing this?
2
Answers
What you have there should work just fine?
There’s two ways of doing JSON stuff; one is as you’re doing and dynamically request the file, the other is to literally
import dataJson from './assets/data.json'in your file directly.The second option, I was surprised to find out, actually gets compiled into your code so that the json values are literally part of your, e.g.
main.js, app files.So, yours is good for not being a part of your app, it will request that file on every app load (or whenever you tell it to).
Means it will load your local debug file because that’s what it’s got, and then the prod file when deployed; it’s just requesting a file, after all.
What I foresee you needing to contend with is two things:
Unless your app keeps requesting the file periodically, it won’t magically get new data from any new file that you push. Until/unless someone F5’s or freshly browses to the site, you otherwise won’t get that new data.
Even if you occasionally check that file for new data, you need to handle the fact browsers try to be nice and cache files for you to make things quicker. I guess this would be handled with various cache headers and things that I know exist but have never had to touch in detail myself.
Otherwise, the browser will just return the old, cached data.json instead of actually going and retrieving the new one.
After that, though, I can’t see anything wrong with doing what you’re doing.
Slap your file request in an interval and put no-cache headers on the file itself and… good enough, probably?
You are already following the right convention, which is to call the data with the HTTP client, not importing the file.
Now you can just gitignore the file, and replace it in a deployment step or whatever suits you.
Just watch for caching. You might want to add a dummy query string with some value based on a time or something to ensure the server sends a new file, based on how often you might update this file.