Migrate website to Gatsby

[alexdor]

Migrating this project to Gatsby will decrease the time-to-interactive for the users and improve site's seo

[siddhant1]

Looks amazing to me. Will start working on this soon

[siddhant1]

Should we do it in typescript only?

[alexdor]

@siddhant1 I'm not sure what do you mean with the question about typescript.

[ashu8912]

By doing it in typescript he means that instead of writing codes in js way for gatsby we will be doing it in ts files and the "ts way"

earlier =>"React with Ts" enhancement =>"gatsby with TS"

[ashu8912]

I also want to work upon this one coz i am into gatsby these days so it would be kind of a benefit for me

[alexdor]

Yeah ideally it would be in typescript so we can leverage the existing code (and the benefits of ts). There is a gatsby plugin for ts here https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typescript

[siddhant1]

Cool , let's start with moving the routes !

[ashu8912]

How do we start the gatsby transformation... doing it on this repo will break the already present code and as this repo uses netlifies continuous deployment feature The broken website will lead to problems to the already user of the website --------Things we can do --------- 1.we can stop the continuous deployment feature for a specific amout of time till our gatsby transformation is done 2.Or creating a new Repo and doing everything there and at the end making live the new Enhanced Website

If there is any other option plzz tell

[alexdor]

I think that the best way is to start a branch here and collaborate on that branch, so we can have the previews that netlify produces and have a single point of tracking progress. What do you think?

[ashu8912]

yeah thats the best thing we can do

[siddhant1]

I will make my first pr on this today or maybe tomorrow , I think we can build over that

[alexdor]

@siddhant1 and @ashu8912 you should both have access to write to this repo, so create a branch here.

Note: The master branch is locked so in order to get smth into the master branch we need to make a pr

[ashu8912]

will soon create branch "fixme-enhancement-gatsby" or should i name it something else??? also will update docs to tell how to contribute to this branch.........

[alexdor]

I don't mind the name, feel free to choose : )

[ashu8912]

ok thanks :)

[ashu8912]

@siddhant1 and @ashu8912 you should both have access to write to this repo, so create a branch here.

Note: The master branch is locked so in order to get smth into the master branch we need to make a pr

@alexdor I don't have rights to write to this repo didn't received any enail send request to collaborate...... :)

[ashu8912]

I think that the best way is to start a branch here and collaborate on that branch, so we can have the previews that netlify produces and have a single point of tracking progress. What do you think?

https://stackoverflow.com/questions/1384325/in-git-is-there-a-simple-way-of-introducing-an-unrelated-branch-to-a-repository

we will be creating an orphan branch for this gatsby transformation it will be a fresh branch(meaning no ancestors) . And when the project is finally transformed to gatsby we will be removing the master branch content and merging this branch to an empty master

---Or--- we can copy the content of the master branch to some other repo specifying the old code is here....

Now one thing more as i see for this fixme repo the continuous development feature of netlify only looks for the master branch we can make use of another cool feature of netlify i.e., "Branch deploy" with this we get netlify previews for branches that are specified on netlify..

@alexdor plzz show your views on this...

[alexdor]

I don't see the reason of starting on orphan branch. A lot of the existing codebase will be reused, it is just a tooling change. Why do you want to create an orphan branch?

Note: @ashu8912 I've send you an email yesterday with the link to accept the invitation let me know if you didn't get it

[ashu8912]

i thought that starting from orphan and than bootstrapping the code with gatsby cli would be a great idea . coz if master is an ancestor to this newly created branch than we will have the old code also in our branch.... ------------"problem(not actually just a lot of refactoring)"-------- like gatsby cli will generate a src folder and than we already have a src folder so lot of deletion and updation will take place while doing this......... ------------------------Two Options----------- 1.start on an orphan branch bootstrap with gatsby cli and we still can use the old code wherever we want 2.Use the old code and on new branch Don't use the gatsby cli...........manage gatsby dependency all by ourselves

Both options can be done...... @alexdor

[alexdor]

My recommendation would be to do the following:

• Generate a new project with Gatsby's cli there are a few starter kits with ts here: https://www.gatsbyjs.org/starters?c=TypeScript&v=2 on a folder in your computer
• Create a new local branch in this repo
• Bring the structure and the changes from Gatsby's generated folder into this repo and merge the package.json folder
• Test the new changes

But feel free to implement it another way if you think you can find a better one.

[ashu8912]

ok that would be great :)

[Muljayan]

@alexdor what do you think of next js ? It can help with SEO too.

[alexdor]

@Muljayan why do you think that it would be more beneficial to switch to nextjs instead of gatsby?

[Muljayan]

Honestly, I am not familiar with Gatsby, but I am aware that with next.js the head tag, meta tags can be dynamically changed to optimize it for search engines.

[siddhant1]

In this project React helmet is taking care of that

On Mon 4 Mar, 2019, 6:09 PM Muljayan, notifications@github.com wrote:

Honestly, I am not familiar with Gatsby, but I am aware that with next.js the head tag, meta tags can be dynamically changed to optimize it for search engines.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ossn/fixme/issues/109#issuecomment-469238295, or mute the thread https://github.com/notifications/unsubscribe-auth/AdJoBozur3ipP2OE253doo-B6Q1CO9cyks5vTRQIgaJpZM4bPj4F .

[alexdor]

Yeah, as @siddhant1 mentioned this project already sets dynamic meta tags (you could also do that with plain js). The main improvement regarding seo is going to be the prerendered pages. Prerendered pages will dicrease the time-to-interactive and will allow the crawlers to parse the website better.

Both nextjs and gatsby support prerendering pages (nextjs also supports rendering pages per request based, but we don't need that feature because we don't have so much dynamic content so it wouldn't justify the extra server required to render pages per request). So both technologies are a good candidate.

The reason why I suggested gatsby over nextjs is that gatsby has more tooling regarding content sources and because it is more oriented towards static page generation than nextjs. Though I might be wrong, so feel free to convince me otherwise if you think that nextjs is better for this use case :)

[Muljayan]

I agree. Since the majority of the site would be static Gatsby would be a good fit.

[himankpathak]

Hi @ashu8912, what's the status? Are you still working on this issue?

[siddhant1]

Hey @himankpathak I am working on this , I have some changes ready in my branch (breaking though) , I will.be pushing this one soon

[alexdor]

@ashu8912 @siddhant1 hi : ) what's the status of this?

[siddhant1]

Basic scaffold is ready , extending now