Sample Multi-language Website with slices in Node.js
Want to see an example of a multi-language website using prismic.io? In this project, we provide all the code you need to get quickly a website with a homepage, information pages, and a navigation with multiple languages. Let's see how to set up prismic.io to get this up and running.
We provide you with all the tools to get this example website working. After you set up your content repository we will show you how to configure the code, preview your content, and deploy your site to the web.
The quick way to get started is to launch this project using the prismic.io command line tool. With one command you can install the project files, create a prismic.io repository, and automatically set up the custom types. In your terminal, run the following code to install the command line tool.
npm install -g prismic-cli
Once that is installed, you can run the following code to launch the project.
prismic theme https://github.com/prismicio/prismic-demo
This sets everything up for you, and you can now connect on your newly created repository.
Setting up the repo for i18n
When you first load your repository, a pop-up will appear and prompt you to select your master language. This will be the primary/default language of the repository.
After this is done, head to Settings / Multi-languages to add more languages.
For every language that you have added to your repository you need to modify your project configuration. Go to i18n.json in your project, and add the new languages in this configuration document.
Creating documents in multiple languages
When you create and save a new document, you can directly create an alternate language version of the same document by selecting a different language at the top.
Alternatively, after creating a document, you can go to the document listing page, then select a different language. In the document list for the language you just selected, you will now see that the new document appears in the list with a marker saying that it needs to be translated. You can select the document and add your content this way as well.
Write some content
1) Create a couple of pages
Start by creating one or two pages. Go to Content, hit New, and select the Pages type. Make sure to fill the mandatory UID field that is used for the Page page’s url.
Save and publish!
2) Create A Homepage
Go to Content, hit New, and select the Homepage. Enter a set of slices to compose your page to create a flexible homepage. Then save and publish!
3) Fill in the Menu
Finally we can fill in our Menu custom type. Go to Content, hit New, and select the Menu type. Add a title such as “My superb website”. Then include multiple link to other documents.
For each Link you want to add to the navigation:
a) Add a Link Label
b) Select the appropriate Document
Save and publish!
Set the preview
The sample with multiple-language include the preview and edit button built-in. You can go to your settings and just enter your domain, for your dev env (http://localhost:3000/preview) and your domain website if you host this sample (example: http://example.com/preview).
Run the website
Let’s see if things are working. Just enter
npm run dev
in your terminal
And enjoy your newly created website with multiple-languages.
Deploy & go live
Create a new Heroku application
$ heroku create
Initialize a new Git repository
$ git init $ heroku git:remote -a your-heroku-app-name
Commit your code to the Git repository and deploy it to Heroku
$ git add . $ git commit -am "jeparlefrancais" $ git push heroku master
You can now browse your application online
$ heroku open