fixme icon indicating copy to clipboard operation
fixme copied to clipboard

Migrate website to Gatsby

Open alexdor opened this issue 6 years ago • 31 comments

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

alexdor avatar Feb 25 '19 10:02 alexdor

Looks amazing to me. Will start working on this soon

siddhant1 avatar Feb 25 '19 11:02 siddhant1

Should we do it in typescript only?

siddhant1 avatar Feb 25 '19 11:02 siddhant1

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

alexdor avatar Feb 25 '19 11:02 alexdor

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 avatar Feb 26 '19 17:02 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

ashu8912 avatar Feb 26 '19 17:02 ashu8912

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

alexdor avatar Feb 26 '19 17:02 alexdor

Cool , let's start with moving the routes !

siddhant1 avatar Feb 27 '19 03:02 siddhant1

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

ashu8912 avatar Feb 27 '19 07:02 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?

alexdor avatar Feb 27 '19 08:02 alexdor

yeah thats the best thing we can do

ashu8912 avatar Feb 27 '19 08:02 ashu8912

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

siddhant1 avatar Feb 27 '19 08:02 siddhant1

@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 avatar Feb 27 '19 08:02 alexdor

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.........

ashu8912 avatar Feb 27 '19 08:02 ashu8912

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

alexdor avatar Feb 27 '19 08:02 alexdor

ok thanks :)

ashu8912 avatar Feb 27 '19 08:02 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 avatar Feb 27 '19 16:02 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...

ashu8912 avatar Feb 28 '19 02:02 ashu8912

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

alexdor avatar Feb 28 '19 08:02 alexdor

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

ashu8912 avatar Feb 28 '19 09:02 ashu8912

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.

alexdor avatar Feb 28 '19 10:02 alexdor

ok that would be great :)

ashu8912 avatar Feb 28 '19 11:02 ashu8912

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

Muljayan avatar Mar 03 '19 15:03 Muljayan

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

alexdor avatar Mar 03 '19 16:03 alexdor

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.

Muljayan avatar Mar 04 '19 12:03 Muljayan

In this project React helmet is taking care of that

On Mon 4 Mar, 2019, 6:09 PM Muljayan, [email protected] 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 .

siddhant1 avatar Mar 04 '19 12:03 siddhant1

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 :)

alexdor avatar Mar 04 '19 14:03 alexdor

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

Muljayan avatar Mar 05 '19 10:03 Muljayan

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

himankpathak avatar Mar 05 '19 12:03 himankpathak

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

siddhant1 avatar Mar 05 '19 12:03 siddhant1

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

alexdor avatar Mar 20 '19 09:03 alexdor