Static build #220

mimiflynn · 2024-12-10T20:34:06Z

As a first step for #177 this PR converts the Vite React AJAX json call to a static build of the calendar with the data already included and rendered on the server using Gatsby.

There are no visual or functional changes to the calendar; this update only impacts build and output.

mimiflynn · 2024-12-10T21:34:27Z

src/components/Calendar.jsx

+  useState,
+} from 'react';
+
+import events from '../../dist/events.json';


Pulling the event.json at time of build, so updated the PR build.

You think we could do some pre-culling here, and only display events for the last-next 12 months (and don't allow the calendar to be forwarded over that 12 months), to cut back the size of the build/download and make it more performant. Definitely not part of this PR, rather as a future issue to be solved.

Interestingly, the performance boost is so big already from the static change alone, that we do not necessarily need my suggested change at all.

mimiflynn · 2024-12-11T16:25:23Z

.eslintrc.json

Gatsby includes eslint with a comprehensive config.

mimiflynn · 2024-12-11T16:26:21Z

.github/workflows/pr-build.yml

@@ -21,8 +21,10 @@ jobs:
        with:
          node-version: '${{ matrix.node-version }}'

+      - name: Get events mock for PR build
+        run: npm run get-mock-events
+


Run PR build with mock events to ensure the build is successful.

mimiflynn · 2024-12-11T16:27:20Z

mock/events.json

Mock events to be used for PR build to test that server side rendering will build successfully.

mimiflynn · 2024-12-11T16:29:58Z

scripts/setMock.js

Script to copy the mock events.json into /dist to mimic the google calendar event.json pull.

mimiflynn · 2024-12-11T16:32:04Z

src/components/Calendar.jsx

    setShowEventDetails(false);
-    window.outerWidth < 600 && setPopupPosition({ left: 0, top: 0 });
+    !isMinWidth() && setPopupPosition({ left: 0, top: 0 });


Since the build creates a server side rendering of the site, window is not available and fails the build.

mimiflynn · 2024-12-11T16:34:00Z

src/components/Calendar.jsx

@@ -202,7 +198,7 @@ function Calendar() {
        aspectRatio={aspectRatio}
        handleWindowResize={true}
        windowResize={windowResize}
-        events="events.json"
+        events={events}


Applying the events that were pulled as events.json at the top of this file.

psmulovics · 2024-12-11T16:39:17Z

Wow, this hopefully will speed up the load of the page significantly.

…build

robmoffat · 2024-12-11T17:18:09Z

this sounds amazing. is there a preview anywhere?

psmulovics · 2024-12-11T17:20:54Z

this sounds amazing. is there a preview anywhere?

@robmoffat , we would need @maoo 's help on setting up a similar staging site on netlify like we have for the others; so, not yet. If you could note to him to do it, that would help :)

robmoffat · 2024-12-12T14:18:39Z

this sounds amazing. is there a preview anywhere?

@robmoffat , we would need @maoo 's help on setting up a similar staging site on netlify like we have for the others; so, not yet. If you could note to him to do it, that would help :)

Ok, having a crack at this myself...

robmoffat · 2024-12-12T15:51:48Z

Ok, previews now working! (for Gatsby at least)

See: https://deploy-preview-221--calendar-gatsby.netlify.app
Which is based on my PR: #221

You'll have to incorporate my changes into your PR to get it to preview properly, @mimiflynn

netlify · 2024-12-12T16:49:39Z

❌ Deploy Preview for calendar-gatsby failed. Why did it fail? →

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`997e775`
🔍 Latest deploy log	https://app.netlify.com/sites/calendar-gatsby/deploys/6762f2a5bf9732000738dca5

mimiflynn · 2024-12-12T17:21:05Z

@robmoffat I pulled your branch into this one and created a new script for PR builds that don't have access to secrets. Please see the comment above for deploy request approval.

robmoffat · 2024-12-18T11:20:46Z

Ok, this build script doesn't work, because netlify doesn't use GitHub Actions - it just runs npm run build

Since you are a collaborator on the project you should be able to push a branch to finos:static-build and it should work properly. Can you try that?

mimiflynn · 2024-12-18T16:10:55Z

@robmoffat Both PRs appear to be building successfully.

robmoffat · 2024-12-19T12:13:48Z

@robmoffat Both PRs appear to be building successfully.

What I meant was, the builds aren't used for netlify.

robmoffat · 2024-12-19T12:15:20Z

@robmoffat Both PRs appear to be building successfully.

If we're going to start using netlify previews, I think we also should use netlify for the live site as well, otherwise we're going to get caught out when a preview is different from the deployed version

psmulovics · 2024-12-19T12:40:12Z

Wait, I thought all finos sites are using netlify.

robmoffat · 2024-12-19T13:47:03Z

Wait, I thought all finos sites are using netlify.

not this one it seems: https://github.com/finos/calendar?tab=readme-ov-file#live-environment

psmulovics · 2024-12-19T14:41:08Z

What would it take for this to run on netlify as well...? And, in the meantime, can we merge the static build PR?

robmoffat · 2024-12-19T16:56:44Z

What would it take for this to run on netlify as well...? And, in the meantime, can we merge the static build PR?

It's not super-hard, we're going to have to do a tiny bit of work with domain names. I'd like to sync with @TheJuanAndOnly99 to get this done

@psmulovics See also #221 which is based on this

mimiflynn · 2024-12-19T17:27:00Z

Scope creep!

mimiflynn and others added 9 commits November 1, 2024 15:14

refactor to separate components and utils

fb57e75

header component

fc7c595

backrground alignment

3130d73

Merge branch 'main' of github.com:mimiflynn/calendar

4f0ae48

Merge branch 'main' of https://github.com/finos/calendar

ad05ce5

Audit Fix

350d531

convert calendar to static build for faster loading times

66565df

remove public

988457d

Update build to include the events before the site build

0a168c6

mimiflynn added the enhancement New feature or request label Dec 10, 2024

mimiflynn self-assigned this Dec 10, 2024

update config to include page title and implement

add3719

mimiflynn commented Dec 10, 2024

View reviewed changes

mimiflynn added 4 commits December 10, 2024 17:03

add mock events to PR build and local dev

ad3d923

create dist dir in mock script

066f143

conditional window calls for server side rendering

09cd0c1

remove unused variable

8042201

mimiflynn marked this pull request as ready for review December 11, 2024 16:23

mimiflynn requested review from TheJuanAndOnly99, maoo, robmoffat and psmulovics and removed request for TheJuanAndOnly99 December 11, 2024 16:23

mimiflynn commented Dec 11, 2024

View reviewed changes

.eslintrc.json Outdated

Copy link

Member Author

mimiflynn Dec 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gatsby includes eslint with a comprehensive config.

mimiflynn commented Dec 11, 2024

View reviewed changes

mock/events.json Outdated

Copy link

Member Author

mimiflynn Dec 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mock events to be used for PR build to test that server side rendering will build successfully.

fix version number

d813fff

mimiflynn commented Dec 11, 2024

View reviewed changes

scripts/setMock.js Outdated

Copy link

Member Author

mimiflynn Dec 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Script to copy the mock events.json into /dist to mimic the google calendar event.json pull.

mimiflynn commented Dec 11, 2024

View reviewed changes

Merge branch 'main' of https://github.com/finos/calendar into static-…

9552bc4

…build

robmoffat added 3 commits December 12, 2024 14:39

Trying to get gatsby preview working

11aba63

changing env var

e99876b

Got build working locally

957a1cf

add pr build script

d1467a4

psmulovics approved these changes Dec 17, 2024

View reviewed changes

mimiflynn mentioned this pull request Dec 18, 2024

Static build #222

Merged

mimiflynn added 2 commits December 18, 2024 10:44

dep override

5c72592

dep override async

997e775

mimiflynn merged commit 50d513a into finos:main Dec 19, 2024
11 checks passed

mimiflynn deleted the static-build branch December 19, 2024 20:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Static build #220

Static build #220

mimiflynn commented Dec 10, 2024

mimiflynn Dec 10, 2024

psmulovics Dec 11, 2024

psmulovics Dec 18, 2024

mimiflynn Dec 11, 2024

mimiflynn Dec 11, 2024

mimiflynn Dec 11, 2024

mimiflynn Dec 11, 2024

mimiflynn Dec 11, 2024

mimiflynn Dec 11, 2024

psmulovics commented Dec 11, 2024

robmoffat commented Dec 11, 2024

psmulovics commented Dec 11, 2024

robmoffat commented Dec 12, 2024

robmoffat commented Dec 12, 2024

netlify bot commented Dec 12, 2024 •

edited

Loading

mimiflynn commented Dec 12, 2024

robmoffat commented Dec 18, 2024

mimiflynn commented Dec 18, 2024

robmoffat commented Dec 19, 2024

robmoffat commented Dec 19, 2024

psmulovics commented Dec 19, 2024

robmoffat commented Dec 19, 2024

psmulovics commented Dec 19, 2024

robmoffat commented Dec 19, 2024 •

edited

Loading

mimiflynn commented Dec 19, 2024

Static build #220

Static build #220

Conversation

mimiflynn commented Dec 10, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

psmulovics commented Dec 11, 2024

robmoffat commented Dec 11, 2024

psmulovics commented Dec 11, 2024

robmoffat commented Dec 12, 2024

robmoffat commented Dec 12, 2024

netlify bot commented Dec 12, 2024 • edited Loading

❌ Deploy Preview for calendar-gatsby failed. Why did it fail? →

mimiflynn commented Dec 12, 2024

robmoffat commented Dec 18, 2024

mimiflynn commented Dec 18, 2024

robmoffat commented Dec 19, 2024

robmoffat commented Dec 19, 2024

psmulovics commented Dec 19, 2024

robmoffat commented Dec 19, 2024

psmulovics commented Dec 19, 2024

robmoffat commented Dec 19, 2024 • edited Loading

mimiflynn commented Dec 19, 2024

netlify bot commented Dec 12, 2024 •

edited

Loading

robmoffat commented Dec 19, 2024 •

edited

Loading