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.

Demo Download the code

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.

Quick Install

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.

Copy
npm install -g prismic-cli

Once that is installed, you can run the following code to launch the project.

Copy
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

Copy
npm run dev

in your terminal

And enjoy your newly created website with multiple-languages.

Deploy & go live

An easy way to deploy your Node.js application is to use Heroku. Just follow these few simple steps once you have successfully signed up and installed the Heroku toolbelt:

Create a new Heroku application

Copy
$ heroku create

Initialize a new Git repository

Copy
$ git init
$ heroku git:remote -a your-heroku-app-name

Commit your code to the Git repository and deploy it to Heroku

Copy
$ git add .
$ git commit -am "jeparlefrancais"
$ git push heroku master

You can now browse your application online

Copy
$ heroku open