In order to reach a large number of users in different countries, multi-language websites are essential. Prismic provides a localisation feature to get content in different languages and this article shows you how to install and use a prebuilt project which uses this feature.
For this project, we provide you with all the source code you need to get your site up and running. We will also walk you through setting up a new Prismic project from your terminal using the 'prismic-cli' tool, which will not only copy all the required code for you to get started right away, but also setup the required content repository for you in a few simple steps.
1. Install the Prismic Command Line Tool
The first step will be to install the 'prismic-cli' package. Launch a terminal, from where you will run the command to globally install the package.
npm install -g prismic-cli
Sometimes it's possible that this command doesn't work. If that's the case for you, try executing a sudo command:
sudo npm install -g prismic-cli
Once installation is finished, navigate to the location where you want to create your new project folder and run the following command. This will create a new Prismic repository along with different custom types and install the project code:
prismic theme --theme-url https://github.com/prismicio/nodejs-multi-language-site --conf config/prismic-config.js
(MAKE SURE YOU'RE USING THE LATEST VERSION OF THE CLI)
This command will ask you to mention a name for your Prismic repository and local folder to initialize the project. It will create a local folder with the files for your project and a repository in Prismic with the given name.
Navigate to the folder you have just created, in the ‘config’ folder open the 'prismic-config.js' file and confirm that the name you have chosen for your content repository has been setup correctly as the API endpoint that the web application will use to fetch the content you will create in Prismic.
2. Add languages to the repository and write some content in different languages
Once you create the repository with the prismic theme command, it will show in your Prismic Dashboard url, you will need to choose the master language. After that, you can add other languages in your repository by going to settings -> Translations and locales -> Select an existing locale from the list.
Go to "Content" and hit "New", choose the Homepage type and add some content in the master language. Save and publish!
Follow the link to create or add content for different locales:
Now, add some content using the Page and Menu types. Make sure to fill the mandatory UID field that is used for your page's URL. Save and publish.
Next, in the 'config' folder of the project open the 'site-config.js' file and you need to update the default language with one you’re going to be using in your project.
3. Launch the local server
Now, open your project folder in the terminal and run the following command :-
npm install -g nodemon
This will launch a local development server at http://localhost:3000. Check out how all your content is being shown, and how changes in your repository are reflected.
4. Deploy to Heroku and 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 file with the name Procfile at your application root . Put the following code in the Procfile file:
web: node app.js
Create a new Heroku application
Initialize a new Git repository
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 "make it better"
git push heroku master
You can now browse your application online
Customize to your liking
You should easily find what to modify in the code to customize the project: just edit the stylesheets and the templates to fit your design!