Website Architecture Changes

[camposcristian]

@kbardi @lulen11 feel free to add/edit/remove anything on this list if needed to make sure the Epic is updated!

High Priority Tasks before the Deploy on Jan 21st 🚀

• Merge staging to master and test how the budget for lighthouse works @kbardi @bronz3beard
• Loading Process Research and Implementation (Remove Loaders / Add Placeholders for images and CSS page scaffolding, primarily header, footer and logos components) 3d @kbardi
• Make sure we test Be a Mentor, Donate and Positions with at least one submission each
• Modify bugsnag to go to this new architecture

Nice to have

• Get inline critical CSS replacing the basic CSS so is loaded only once @kbardi
• Close the PR of Apparel and transfer the structural work we did @davidpaley
• Remove Craft completely
• Use Github Secrets for any tokens we need and look for a way to share them on Heroku if needed

Done

• Implement SEO for user browser and bots @davidpaley
• Transfer the issues left to the new repo @mischacolley
• Redesign Be a Mentor to only include a login (@lulen11 @mischacolley maybe get a quick redesign without the form?)
• Fix the carousel in /stories page @davidpaley
• Transfer Be a Mentor @davidpaley
• ❗️High Priority! Fix assets deployment and compress them using gzip in Cloudfront @kbardi
• Research SEO and the content model on CMSs to include images @mischacolley
• Lazy load using @loadable/component instead of Loadable @kbardi
• Check and fix env variables @davidpaley
• Migrate contact forms to Intercom @bronz3beard Integrate Intercom #7
• Transfer Donate @davidpaley
• Transfer Positions to this new architecture @bronz3beard
• Remove static.json . Look for alternatives using Contentful Handle redirects from Contentful #12 @bronz3beard
• Start using CloudFront CDN for assets
• Deploy the website assets (website+blueprint js+css) and access from a CDN @camposcristianeze 1d //I'll get this one on Friday.
• Migrate pages left behind @kbardi 1,5d
• Rename website for website-v4 and website-ssr-blueprint-poc for website @camposcristianeze
• Transfer latest changes from the past 3 weeks @kbardi
• Test inline vs chunk JS in S3 for the critical path and add this automatically to the index.html @camposcristianeze
• Remove both S3 buckets tied to NE account and create new ones @camposcristianeze
• Test Blueprint integration
• Deploy to Heroku
• Transfer one by one all the pages from the old repo
• Lazy load using Loadable
• Create a new app in staging. Deploy it just using node SSR
• Add first structures in contentful (redirects/images/banners) @mischacolley

Pages using Craft - (Remove Craft completely)

• Reports
• Be a Friend
• Stories
• Story
• Contact
• Terms of Service
• All SEO information

Pages with more logic

• Be a Mentor (To replace)
• Positions (To replace)
• Donate (@mischacolley any ideas around this?)

[camposcristian]

Reports 14:09.zip

React-snap current v4

First v5 release

[camposcristian]

Just tested minimalcss for the homepage. The rendering looks better but then the rehydration process runs and loads the page for a second time using fileloader.jsfor no reason.. There should be a way of preventing this jump

V5 after testing minimalcss

[bronz3beard]

Could I please have some more info on this "Budget for Lighthouse (5 s / bundle size / etc)", I know we mentioned it on a chat @camposcristianeze are you able to offer me some more info?
Is this along the lines of identifying Critical Resource Path? Resources + Size + Round Trips Total to server from browser?
RTT * time depending on internet connection = Critical Path Speed

[camposcristian]

My answer here --> https://www.loom.com/share/67bb80f83ad0418e8a262c42be932b68

Some of the links I was mentioning:

• https://github.com/GoogleChrome/lighthouse
• https://github.com/carlesnunez/lighthouse-gh-reporter
• https://labs.moduscreate.com/gimbal-web-performance-audit-budgeting

[camposcristian]

V4 Production after checking adding more power to the server :)

[kbardi]

Hey @camposcristianeze can we close this issue and maybe open only one with pending things before getting it live? I think most of the things are done, the loaders are working, we are not using placeholders for images, but we need to spend some time testing webp converters and small placeholder images generators, some things are coming from Contentful and some others from AWS bucket, so maybe that is not urgent for the release...and this issue seems to be quite big and almost finished...let me know if you want from me to close any other thing from here, because I'm focused now with the migration of pages to the new branding

[camposcristian]

Sure! Go ahead and close it. 2 things that would be nice if you can add as separate issues if are not done are..

Merge staging to master and test how the budget for lighthouse works @kbardi @bronz3beard
Modify bugsnag to go to this new architecture

[kbardi]

@camposcristianeze bugsnag seems to be configured in the project, not sure if it is working, but I can see here that it is initialized...and it has the right key for website-frontend...do you want me to create a new project in bugsnag? I'm using the website one with the KEY a7e1073d7f3c8f5381afb5e8e68487ac

About the merge, I will create a new issue because we will do it I think when the pages the agreed to migrate this week are finished if it is ok...and after a good test on staging

[camposcristian]

@camposcristianeze bugsnag seems to be configured in the project, not sure if it is working, but I can see here that it is initialized...and it has the right key for website-frontend...do you want me to create a new project in bugsnag? I'm using the website one with the KEY a7e1073d7f3c8f5381afb5e8e68487ac

Nah, we can use the same.

About the merge, I will create a new issue because we will do it I think when the pages the agreed to migrate this week are finished if it is ok...and after a good test on staging

hmm I would recommend to start way before the pages so then everything is configured and it doesn't add to the last 10% of the work that always takes a lot

[kbardi]

Hey @camposcristianeze @mischacolley , I'm not sure with this Epic, because it seems to be almost done about issues, but we mentioned here multiple things we don't have on any issue, so I'm creating some issues associated to this Epic, let me know if it is ok or we have them in other place, and also it seems to me the Epic is quite big with the Nice to Have list, so it could take longer to finish it...what do you think about adding the nice to have in a different Epic?

1. Remove Craft completely...I think we are close, but we still use it for some things like SEO tags, some entries for pages (contact, be a friend, reports, terms and conditions, and stories).
   The last thing...for some reason we get Google API Token for Address Autocomplete from Craft, not sure why, but if it is ok, I can add it as en environment variable.
2. Close the PR of Apparel and transfer the structural work we did, not really sure if we are going to migrate this, and what do you want to do...I think it is not a priority because Apparel is not gonna be inside website...
3. About Github secrets...what is pending to do here? I think we are deploying correctly in Heroku and Now, so I think we don't need to update anything there.
4. Get inline critical CSS replacing the basic CSS so is loaded only once: I think it is done, it is working quite well, the pending thing is to migrate everything to css modules, so we can reduce significantly the size of our css.
5. Make sure we test Be a Mentor, Donate and Positions with at least one submission each...I think we already tested it and it is working well...can I check this item?

[camposcristian]

Hey @camposcristianeze @mischacolley , I'm not sure with this Epic, because it seems to be almost done about issues, but we mentioned here multiple things we don't have on any issue, so I'm creating some issues associated to this Epic, let me know if it is ok or we have them in other place, and also it seems to me the Epic is quite big with the Nice to Have list, so it could take longer to finish it...what do you think about adding the nice to have in a different Epic?

1. Remove Craft completely...I think we are close, but we still use it for some things like SEO tags, some entries for pages (contact, be a friend, reports, terms and conditions, and stories).
   The last thing...for some reason we get Google API Token for Address Autocomplete from Craft, not sure why, but if it is ok, I can add it as en environment variable.
2. Close the PR of Apparel and transfer the structural work we did, not really sure if we are going to migrate this, and what do you want to do...I think it is not a priority because Apparel is not gonna be inside website...
3. About Github secrets...what is pending to do here? I think we are deploying correctly in Heroku and Now, so I think we don't need to update anything there.
4. Get inline critical CSS replacing the basic CSS so is loaded only once: I think it is done, it is working quite well, the pending thing is to migrate everything to css modules, so we can reduce significantly the size of our css.
5. Make sure we test Be a Mentor, Donate and Positions with at least one submission each...I think we already tested it and it is working well...can I check this item?

Ok I saw the epic. @mischacolley not sure if we should aim to standardise epics across repos so that one will be "Tech Debt" --> https://github.com/aimementoring/aime-portal/issues/657

In any case let's move on with this one, answering per point:

1. Remove Craft completely...I think we are close, but we still use it for some things like SEO tags, some entries for pages (contact, be a friend, reports, terms and conditions, and stories).

@kbardi most of these pages were mostly replaced.

• Contacts and be a Friend were implemented using Intercom
• Reports could be implemented with contentful (please create an issue)
• Stories is already implemented with contentful and all the stories were migrated
• Terms and conditions page is static, so it can live inside /pages (please create an issue)
• SEO can be mostly implemented in code using react-helmet (I think I spoke with @bronz3beard about this, if it's not implemented yet please create an issue)
  Re Google API Token for Address Autocomplete, I don't think we will use this anymore here? Where is being used? If needed yes, just add it as a variable.

Close the PR of Apparel and transfer the structural work we did, not really sure if we are going to migrate this, and what do you want to do...I think it is not a priority because Apparel is not gonna be inside website...

This is being discussed on #32 . Let's update the title to reflect what we'll do.

About Github secrets...what is pending to do here? I think we are deploying correctly in Heroku and Now, so I think we don't need to update anything there.

I created an issue for this #86

Get inline critical CSS replacing the basic CSS so is loaded only once: I think it is done, it is working quite well, the pending thing is to migrate everything to css modules, so we can reduce significantly the size of our css.

👍 maybe we need an issue for this?

Make sure we test Be a Mentor, Donate and Positions with at least one submission each...I think we already tested it and it is working well...can I check this item?

Go for it!

[kbardi]

Get inline critical CSS replacing the basic CSS so is loaded only once
@camposcristianeze do we still need it?

• We using GITHUB_SECRETS on CI.

Remove Craft completely
I think we are close, but not sure if we can remove Craft completely this week