Refactor data loading: move from inline JSON to client-side fetch

- Remove large JSON data injection from EJS templates
- Add client-side data-loader utility with cache-busting support
- Create server endpoints for JSON data with long-term caching
- Add graceful failure handling if core data fails to load
- Copy JSON data files to dist/data for static hosting
- Update app initialization to load data asynchronously
- Set serverAvailable flag for static builds in gulp task

This reduces HTML payload size and enables better caching strategies
for both server and static deployment modes.
This commit is contained in:
Eddy G
2025-06-26 17:21:23 -04:00
parent 7f7cb96231
commit 517cafe40a
5 changed files with 96 additions and 25 deletions

View File

@@ -133,11 +133,6 @@ const compressHtml = async () => {
const packageJson = await readFile('package.json');
const { version } = JSON.parse(packageJson);
// Load the same data that the main server uses
const travelCities = JSON.parse(await readFile('./datagenerators/output/travelcities.json'));
const regionalCities = JSON.parse(await readFile('./datagenerators/output/regionalcities.json'));
const stationInfo = JSON.parse(await readFile('./datagenerators/output/stations.json'));
return src(htmlSources)
.pipe(ejs({
production: version,
@@ -145,9 +140,6 @@ const compressHtml = async () => {
version,
OVERRIDES,
query: {},
travelCities,
regionalCities,
stationInfo,
}))
.pipe(rename({ extname: '.html' }))
.pipe(htmlmin({ collapseWhitespace: true }))
@@ -162,6 +154,13 @@ const otherFiles = [
const copyOtherFiles = () => src(otherFiles, { base: 'server/', encoding: false })
.pipe(dest('./dist'));
// Copy JSON data files for static hosting
const copyDataFiles = () => src([
'datagenerators/output/travelcities.json',
'datagenerators/output/regionalcities.json',
'datagenerators/output/stations.json',
]).pipe(dest('./dist/data'));
const s3 = s3Upload({
useIAM: true,
}, {
@@ -222,7 +221,7 @@ const buildPlaylist = async () => {
return file('playlist.json', JSON.stringify(playlist)).pipe(dest('./dist'));
};
const buildDist = series(clean, parallel(buildJs, buildWorkers, compressJsVendor, copyMetarVendor, copyCss, compressHtml, copyOtherFiles, copyImageSources, buildPlaylist));
const buildDist = series(clean, parallel(buildJs, buildWorkers, compressJsVendor, copyMetarVendor, copyCss, compressHtml, copyOtherFiles, copyDataFiles, copyImageSources, buildPlaylist));
// upload_images could be in parallel with upload, but _images logs a lot and has little changes
// by running upload last the majority of the changes will be at the bottom of the log for easy viewing