i18n Setup : Simpler configuration + examples #1847

simoncrypta · 2021-02-24T01:53:25Z

This is to make internalization easy with Redwood

Replaces the i18n.js.template with a simpler and minimal configuration with examples.
Show a configuration for English and French translation that can easily be changed.
Show example with a page in the comment on i18n.js file
Error handling inspire by the tailwind setup command
fixes yarn rw setup i18n fails #1590

what's next

I think we should make a cookbook for translation at scale with RedwoodJS; I will try to work on it soon.

We could make it work with Prerender, It's currently don't work because the useTranslate hook I guess.

We will need to make a way with Redwood Router to add the language inside the URL.

github-actions · 2021-02-24T01:57:59Z

📦 PR Packages

Click to Show Package Download Links

Install this PR by running yarn rw upgrade --pr 1847:0.26.2-06e129d

dac09 · 2021-03-01T11:40:15Z

Hey @simoncrypta, thank you for this! Do you think we can get this out of draft soon? To help you with your outstanding points:

check if if x already exists
If you use the writeFIle method, and pass the "force" flag to overwriteExisting (like you have in some places) that should cover it
I don't know why but new files in the templates folder cannot be found in my test
Not sure why this is happening. Are you running build:watch or build before runing test?

simoncrypta · 2021-03-01T19:41:28Z

Hey @dac09 , Thank you for your help! I currently search for the best way to do internalization with RedwoodJS, and I have more research to do. That's why I didn't get this out of draft yet. I plan to make internalization easy with Redwood with a good convention because they have so many ways to do it with i18n.

Not sure why this is happening. Are you running build:watch or build before runing test?

I running build:watch and everything updates except for what is on the templates folder. I would try again and write more details if isn't working again.

thedavidprice · 2021-03-02T00:36:21Z

@simoncrypta possibly helpful reference article from the Forums: https://community.redwoodjs.com/t/article-about-i18n-and-l10n/1477

And thanks for working on this. Huge help!

simoncrypta · 2021-03-03T20:28:49Z

@dac09 I think you could maybe help me to make it work with prerendering. i18next have a doc for SSR, but don't understand where they put their code for Passing initial translations / initial language down to client 😅

thedavidprice · 2021-03-03T22:45:20Z

@clairefro curious if you have availability to help review this one, specifically about high-level setup and if this includes enough foundational elements to get a project started.

clairefro · 2021-03-03T23:00:36Z

Cool! I will take a closer look at this tonight

I currently search for the best way to do internalization with RedwoodJS, and I have more research to do.

In the meantime @simoncrypta , Gatsby might be an interesting reference for how a framework handles i18n
https://www.gatsbyjs.com/docs/how-to/adding-common-features/localization-i18n/

packages/cli/src/commands/setup/i18n/templates/fr.json.template

packages/cli/src/commands/setup/i18n/i18n.js

simoncrypta · 2021-03-05T02:32:53Z

Thank you, @thedavidprice, to fix my mistakes.

Very interesting i18n RFC @clairefro ! Sub-path routing is definitely something essential that I didn't completely convert with i18next-browser-languagedetector. Also, I didn't think of the html lang attribute, and I presume it is not something too hard to cover; I will work on it!

thedavidprice

I had a couple things I wanted to test locally (e.g. if the "sync Yarn" step was necessary as it was for Tailwind; in this case it was not). And also was generally curious about how React i18n works. I found a path bug I fixed and also updated some vars to match the switch to App.js. Overall was in great shape and works really well. See my simple changes in the commits for reference.

I have one comment about where to place the i18n.js file import in App.js. Not a dealbreaker but please check it out.

thedavidprice · 2021-03-05T02:39:26Z

Thanks for the review and suggestions @clairefro Helpful indeed!

And great work here @simoncrypta This is a really helpful foundational, first step to get people up and running (and not just because it fixes the current bug).

I'll hand off to @dac09 for merge timing, but this has my approval.

Per Claire's suggestion:

I'm guessing this will rely on prerender. In addition to obvious things like localized strings for description, title etc, ideally the html lang attribute (ex: ) and hreflang attribute should be set per locale to promote discoverability.

SEO is an important addition to this initial setup and does not require prerender to get started. Using something like React Helmet, we might be able to add a few pieces to this foundation that addresses both HTML lang and hreflang attributes.

Might you be interested in exploring this as a next step here via a PR, @simoncrypta ?

clairefro · 2021-03-05T04:37:03Z

SEO is an important addition to this initial setup and does not require prerender to get started. Using something like React Helmet, we might be able to add a few pieces to this foundation that addresses both HTML lang and hreflang attributes.

Even with React Helmet, won't prerender be necessary in order to support web crawlers for search engines and social shares?

thedavidprice · 2021-03-05T06:01:26Z

Even with React Helmet, won't prerender be necessary in order to support web crawlers for search engines and social shares?

There's a lot of misconceptions here, so it's more complicated/confusing than it needs to be (which is partly intentional by Google). Crawlers render JS just fine and have for a while, so that's not really an issue. BUT site performance (alas, Lighthouse...) plays a role in the search ranking performance of a website. Meaning that even if your SEO is getting indexed just fine, your site might have terrible (or amazing) end-user performance — Google will adjust where you site displays in search results accordingly. There's a lot of tricks to get sites to perform. One of them is serving static, i.e. cached, content.

Social Shares depend on OG data in the page meta, which does require being rendered server-side.

Messy mess.

tl;dr:
Getting started with React Helmet will indeed improve SEO as is even without pre-rendered pages, which is a great start.

…o pr/1847

packages/cli/src/commands/setup/i18n/i18n.js

thedavidprice · 2021-03-09T03:58:53Z

Great work on all this @simoncrypta 🚀

Would you be interested in opening a new Issue to discuss possible improvements regarding React Helmet + SEO?

Simon Gagnon added 11 commits February 10, 2021 15:32

Replace example with createMany

9b78239

Merge branch 'main' into main

ab9cd04

change comments + add an example for all databases

b7c5dbf

Merge branch 'main' into main

4823b1c

return to current seed.js

e9ba8a3

Rewrite a simpler configuration of i18n

96698e6

Add a template for translation locale files

5ebc4c0

add sync node_module and locale files

3a5a18a

add comment and todo

293b3c8

return to path.join

f263dd6

Merge branch 'main' into fix-i18n

173895a

Simon Gagnon added 2 commits February 23, 2021 21:05

Merge branch 'main' into fix-i18n

7addf32

Merge branch 'main' into fix-i18n

7beefa5

Simon Gagnon added 8 commits March 2, 2021 18:22

Merge branch 'main' into fix-i18n

e59441f

exemple with default generate home page

5064cc7

remove async for writeFile tasks

3703360

missing a "," in json files

c017942

add LanguageDetector

dcc2429

add error handling

4c9bca2

remove "See this doc for info:"

48651e9

Merge branch 'main' into fix-i18n

16c3e97

simoncrypta marked this pull request as ready for review March 3, 2021 20:22

clairefro reviewed Mar 4, 2021

View reviewed changes

packages/cli/src/commands/setup/i18n/templates/fr.json.template Outdated Show resolved Hide resolved

thedavidprice reviewed Mar 5, 2021

View reviewed changes

packages/cli/src/commands/setup/i18n/i18n.js Outdated Show resolved Hide resolved

thedavidprice added 4 commits March 4, 2021 16:40

Update packages/cli/src/commands/setup/i18n/i18n.js

b2f4763

index --> app

c6e3375

remove yarn sync needed only for tailwind config

f47f175

fix path.join error

808face

thedavidprice reviewed Mar 5, 2021

View reviewed changes

packages/cli/src/commands/setup/i18n/i18n.js Outdated Show resolved Hide resolved

thedavidprice approved these changes Mar 5, 2021

View reviewed changes

Simon Gagnon and others added 6 commits March 5, 2021 12:13

Merge branch 'main' into fix-i18n

ffb6580

update from main; use new path.to.appJs for TS support

b5ae085

Merge branch 'fix-i18n' of https://github.com/simoncrypta/redwood int…

e2e0df6

…o pr/1847

add import './i18n' after the last import

ae39471

clean addI18nImport function

c086f5c

Merge branch 'main' into fix-i18n

1a6bf65

simoncrypta requested a review from thedavidprice March 9, 2021 02:40

fix "Module not found: Error: Can't resolve ..."

0ace08d

simoncrypta commented Mar 9, 2021

View reviewed changes

packages/cli/src/commands/setup/i18n/i18n.js Outdated Show resolved Hide resolved

Simon Gagnon and others added 2 commits March 8, 2021 22:31

function name typo

efd154b

remove Sync yarn.lock step

06e129d

thedavidprice approved these changes Mar 9, 2021

View reviewed changes

thedavidprice added this to the next release milestone Mar 9, 2021

thedavidprice added the next release test label Mar 9, 2021

thedavidprice merged commit 42ec5eb into redwoodjs:main Mar 9, 2021

simoncrypta deleted the fix-i18n branch March 9, 2021 04:13

jtoar mentioned this pull request Mar 10, 2021

Newsletter: Issue No. 6 redwoodjs/redwoodjs-com-archive#620

Closed

19 tasks

simoncrypta mentioned this pull request Mar 14, 2021

RFC: Improving SEO with React Helmet 🪖 #2001

Closed

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

i18n Setup : Simpler configuration + examples #1847

i18n Setup : Simpler configuration + examples #1847

simoncrypta commented Feb 24, 2021 •

edited

Loading

github-actions bot commented Feb 24, 2021 •

edited

Loading

dac09 commented Mar 1, 2021

simoncrypta commented Mar 1, 2021 •

edited

Loading

thedavidprice commented Mar 2, 2021

simoncrypta commented Mar 3, 2021 •

edited

Loading

thedavidprice commented Mar 3, 2021

clairefro commented Mar 3, 2021 •

edited

Loading

simoncrypta commented Mar 5, 2021 •

edited

Loading

thedavidprice left a comment •

edited

Loading

thedavidprice commented Mar 5, 2021 •

edited

Loading

clairefro commented Mar 5, 2021

thedavidprice commented Mar 5, 2021

thedavidprice commented Mar 9, 2021

i18n Setup : Simpler configuration + examples #1847

i18n Setup : Simpler configuration + examples #1847

Conversation

simoncrypta commented Feb 24, 2021 • edited Loading

This is to make internalization easy with Redwood

what's next

github-actions bot commented Feb 24, 2021 • edited Loading

📦 PR Packages

dac09 commented Mar 1, 2021

simoncrypta commented Mar 1, 2021 • edited Loading

thedavidprice commented Mar 2, 2021

simoncrypta commented Mar 3, 2021 • edited Loading

thedavidprice commented Mar 3, 2021

clairefro commented Mar 3, 2021 • edited Loading

simoncrypta commented Mar 5, 2021 • edited Loading

thedavidprice left a comment • edited Loading

Choose a reason for hiding this comment

thedavidprice commented Mar 5, 2021 • edited Loading

clairefro commented Mar 5, 2021

thedavidprice commented Mar 5, 2021

thedavidprice commented Mar 9, 2021

simoncrypta commented Feb 24, 2021 •

edited

Loading

github-actions bot commented Feb 24, 2021 •

edited

Loading

simoncrypta commented Mar 1, 2021 •

edited

Loading

simoncrypta commented Mar 3, 2021 •

edited

Loading

clairefro commented Mar 3, 2021 •

edited

Loading

simoncrypta commented Mar 5, 2021 •

edited

Loading

thedavidprice left a comment •

edited

Loading

thedavidprice commented Mar 5, 2021 •

edited

Loading