Localizing Your Remix Website

Rate this content
Bookmark
Github

Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.


Table of contents:

- Introduction to Localization

- Introduction to Contentful

- Localization in Contentful

- Introduction to Remix

- Setting up a new Remix project

- Rendering content on the website

- Implementing Localization in Remix Website

- Recap

- Next Steps

Harshil Agrawal
Harshil Agrawal
154 min
16 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Workshop covered various topics such as introduction to localization and Remix, project setup, creating components, implementing content and internationalization, differences between Remix and Next.js, configuring internationalization, updating titles and navigation, introduction to Contentful, content model and localization, and dynamic routing. Key points include the importance of localization for target regions, the capabilities of Remix as a framework, the process of setting up a Remix project and configuring internationalization, the use of Contentful for managing content, and the implementation of dynamic routing in Remix.

Available in Español: Localizando tu sitio web de Remix

1. Introduction to Localization

Short description:

To give you all an idea of what we are going to build today, it's a very simple recipe web app. We're going to learn it from scratch. The prerequisites are Node.js, a good code editor, and a Contentful account. Basic knowledge of JavaScript and GraphQL is also important. Let's move forward and talk about localization. Localization is making your application available in different languages and ensuring it looks and feels appropriate for the target region. McDonald's in India is an example of successful localization, focusing on vegetarian options. Localization is more than just translation.

To give you all an idea of what we are going to build today, it's a very simple recipe web app. As you can see, right now I have just three different recipes. These are some of my favorite recipes. and there is a language switcher over here. I can switch the language and you can see it changes the name. It updates the values over here as well as for the content as well. I can open up that recipe and get that information as well. If I change it to English, it again translates or gives me the content localized in English again. So this is something that we are going to build and we're going to learn it from scratch as well.

To give you a quick introduction about myself, my name is Harshal Agrawal, and I work as a developer advocate at Contentful, which is something that we are going to look into more in detail. I love to experiment with various different technologies. In my recent experiment, I have been playing with the WebHID API. If you're not aware about the WebHID API, it's a fantastic API that allows you to connect your HID devices to your web applications. And one fun project that I've been working is connecting my PS5 controller with a web-based game. And if you want to know more about me, you can just hit me up. you can go to that website where you can find all the social links that I have and read more about me and my work as well.

All right. Coming back to this, the prerequisites are like, you need to have Node.js installed on your machine. You can use platforms like Gitpod or something, but I am going to be running it locally on my machine. So if you run into errors on those cloud platforms, I might not be able to help you thoroughly with that. So I hope you are using by running it locally on your machine and you have node.js installed. We need a good code editor because it makes the life easy. If you want to use, what was it called? Text, I don't know. The default code editor that window provides. If you want to use notepad, it's on new. Go ahead and use that. As I mentioned, we're going to use Contentful. So having an account on Contentful is going to be super useful. So if you don't have an account on Contentful, you can quickly go ahead and create one. Just go to contentful.com and create an account. You don't need a credit card. You can get started without the need of entering your credit card over there. And we have a basic knowledge of JavaScript and basic knowledge of React is also important. We are going to not use a lot of React over here because we are using Remix. which is super wonderful. But we are gonna use JavaScript a lot. And a basic idea of GraphQL would also be super useful because we are gonna use the GraphQL API over here.

All right. What I'm gonna do is I'm gonna take a couple of minutes over here, see if there are any questions till now around any prerequisites or any requirements or any of those things that I just talked about. If there are no questions, can just give me a thumbs up so that i know you are all clear till now and then and that i can move forward all right okay super so let's move forward and talk about localization as i mentioned i want this to be more interactive so i'm curious to know like what localization means to you again feel free to unmute yourself and just talk about what it means to you. Or if you want, if you prefer writing it in the chat, go ahead and write it in the chat. But I'm curious to know like what is localization for you. And over here, there are no wrong answers. So don't worry about, you know, worry about giving an answer which might not be correct. so localization is making your application available in different languages true true that's absolutely correct all right uh i'm gonna build on top of that and i'm gonna say it's it's also making sure that it's not just the language, but also the way your application looks and feels in that particular region, right? Some of the wonderful examples about localization that I can think about is brands like McDonald's. India is a country where the majority of the population is vegetarian. so if you think about mcdonald's they give out like burgers right and burgers mostly contain have those patties which is not vegetarian friendly so to make to be successful in india mcdonald's adopted uh adopted their strategy and uh and came out with options which focused heavily on vegetarian so all their patties were focused mainly on vegetarians and this is how is like this is like one of an example of localization so again to talk like give you a proper definition of localization it's basically an adaption of product application or document content to meet the language again not just the language but the but the cultural and other requirements of a specific target market right and it's not just about translation it's more than that We got Emanuel. I hope I'm pronouncing your name right, joining in. Hey, thanks for joining in. We've just started the workshop and we talked about what is localization.

2. Introduction to Localization and Remix

Short description:

If you're not on discord, I would highly encourage you to join the discord server. We've covered the prerequisites for the workshop. We discussed the difference between localization and internationalization. Internationalization is the process of making your apps ready for localization. From a project implementation point of view, both localization and internationalization are different processes. We then introduced Remix as the framework we'll be using. Remix is not just a React framework, it's a compiler, a server-side HTTP handler, a server framework, and a browser framework. It compiles your code, generates both server-side and client-side code, and allows you to create APIs. Remix has built-in wrappers for existing frameworks like Express, making it easy to deploy on any platform. It is also a server framework, meaning you can build your whole API using Remix. It's like the view and controller in the MVC framework.

If you're not on discord, I would highly encourage you to join the discord server. I've already shared my GitHub repo that we are going to go through this workshop And just a quick recap of the prerequisites, you need to have Node.js, install a code editor, some basic knowledge of JavaScript, React, and GraphQL would be super useful for you in this workshop.

All right, so we talked about localization. The next part I often hear folks when I talk about localization is this term called internationalization. And folks get confused when they talk about localization or internationalization they often times use these words in exchange of each other which is not like really true because while localization is adapting your product to a re to a particular region internet internationalization is the process of getting over there if we look at the definition of internationalization it's design and development of a product application or document content that enables easy localization for a targeted audience again this audience can vary in culture in region and language as well right so to summarize this internationalization is the process of uh internationalization is the process of implementing or making your apps ready for localization. Does that make sense, and does that clear out the difference between localization and internationalization? I see one thumb going up. Two thumbs going up. Okay, I feel like there might be a question in here. No, okay. All right, that's perfect. I'm gonna wait for one more minute because Fez is joining us as well. I just wanna make sure that before we move to the next part, he can hear what we covered and then we can just move real quick.

Can I ask a question meanwhile? Sure. From implementation-wise, of course, definition is different for localization and internationalization. From a project implementation point of view, how different they are in implementation? From a project implementation point of view, the way this works is you would again a lot of times people use these words in exchange of each other which is not true you always if you have looked into localization earlier you might have come across libraries like i18n but if you think about it it's it does not stand for localization it stands for internationalization right because that's the process of implementing localization So whenever you are working on a project, you, uh, enable it to be localized, even though you may, or may not be needing that in the future. So you are basically adopting the principles which are defined by intent, uh, by, for internationalization because that makes it easy to implement localization. Now, uh, the way I like to think about this is, and I think you'll get more idea about this when we start working on the application is, if I come back to the example over here. Now, I know that a certain part of my text is going to change in the application, right? I have already started working on implementing that part and I know, for example, welcome over here is different in German. The way I created this is keeping in mind that this particular word is going to change, but this whole particular message is going to change. Because I kind of already knew what things I want to do. Does that give you an idea? Does that answer your question? Yes. Yeah, it does. So can we say that internationalization is a subset of localization? I would not put it that way because for me, like, both are two different processes. because the way I think about it is like internationalization allows you to make your product ready for localization, right? Now, you might want to then localize that product for just one region, but you still have to go through the internationalization process and make sure that your product is ready to do that. Later on, you may decide you want to extend it to a new region, right? because you have implemented internationalization already, all you have to do is prepare that localized content, make that content available in that localized language and then simply publish that. So for me, it's kind of two different steps, two different processes, and it's not a subset of one another. Okay, makes sense. Thanks. All right. Faz, I think you just joined in. So we talked about localization. We talked about internationalization. And we are moving to the next part of the workshop. And I see you already are on the Discord servers. You already have the GitHub wrapper, which is fantastic. So moving forward, we are going to talk a bit about Remix because that's the framework that we are going to use today. now how many of you have write out image before or have heard about image before can i get a thumbs up or again feel free to unmute yourselves just write in the chat okay all right so i can say majority of you have heard about uh image but uh one person hasn't that's completely fine we're gonna look into it uh when i started exploring remix when i started playing around with remix i always thought that it was uh another meta framework which is built on top of react but while going through the documentation while working with remix i learned that it's not just another framework a react framework it's more than that so what exactly is remix well remix if you go to the documentation they define remix as a compiler a server site http handler a server framework and a browser framework so it's not just a react framework anymore but it's more than that because when they talk about remix being a compiler it actually compiles your code and gives you client client-side and server-side code. It also generates an asset manifestation file, which gives you a dependency graph and allows the code to map to the particular piece of code correctly. So it basically just compiles your code and gives you both server-side and client-side code. And I love this part about Remix that it's a server-side HTTP handler, which means that you can simply just use Remix as a server. You can just create APIs using Remix. You don't need to then use like any other framework for that. So because you make use is web, the web fetch API under the hood, which makes it easy to deploy on like any kind of platform really like if you are using, It does not matter if you're using Node.js or Deno. Under the hood, it allows you to do that. And the way Remix allows you to do that is it has built up wrappers around the existing frameworks like Express. It already has those wrappers built on top of those frameworks so now you don't have to worry about learning Express or learning about how Cloudflare workers work or how do you manage servers on Vielhel or Netlify and stuff like that. And it is also a server framework, which means as I already mentioned, you can build your whole API just using Remix. And you don't need to also provide any client output or you don't need to have a front end for that. Remix can handle the whole thing. So, the way I like to think about Remix over here is the view and the controller in the MVC framework.

Watch more workshops on topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.