A multi-language website with Nuxt & Contentful

I'll wrap this in 4 main topics.

• Technical
• Leadership
• Challenge
• Success

TL;DR:

• Time taken 12 days for first time using contentful
• 61 hrs hours estimated. Google Spreadsheet tracking my progress (opens new window)
• Contenful allows you 2 millions API calls, in it's free trier
• Show a couple of templates to client always and both agree the design to stick to it.

Technical

Step 1 - Set up the Environment

Tools

• Asus core i7 9th gen 💻
• Windows OS
• WSL - Ubuntu 20.04 OS
• Git
• VS Code

Local Setup

• Install WSL (opens new window)

• Install VSC (opens new window)

• Install Git (opens new window) Set up ssh (opens new window)

• Add Public Key to remote repo (opens new window)

• Add Keychain to workflow (opens new window)

• Add on .bash_profile

  eval $(keychain --eval --agents ssh key1 key2 ...)
  

• Setup node.js on wsl2 (opens new window) ( for this project, stick to node v12.20.0 )

• Setup git on wsl2 (opens new window)

• Workflow to work with Git (opens new window)

Contentful Setup

• Conteful Authentication (opens new window)

• Set up Contentful with Nuxt (opens new window)

Contentful Technical Aspect

• Technical Limits (opens new window)

• Fair Use Policy (opens new window)

• Rich Text HTML Render (opens new window)

Leadership

Step 2 - Strategy

• Buy a template to speed up development from Envato Market

• Integrate Netlify (opens new window) as CI/CD in our github repo

• Set up the Content Models in Contentful (opens new window)

• Let the content migration from Wordpress to Contentful be handle by the client

• Integrate Contentful with Nuxt (opens new window)

• Set up & enable i18n from Contentful (opens new window)

Challenges

Step 3 - Oh boy!

Familiarize with the concepts of Contentful, like:

• CDA (Content Delivery API) (opens new window)

• CMA (Content Management API) (opens new window)

• Spaces (opens new window)

• Content Type (opens new window)

• Relational Types or Links (opens new window)

• Entry (opens new window)

• Fetch Data (opens new window)

• Nuxt integration (opens new window)

• Define a Flat Model Structure to retrieve data A.K.A. the less Relational Types, the better to handle it.

• Localization with Contentful (opens new window)

Success

Step 4 - hurrah!, right?

• We were able to delivery the website and even improve couple of benchmark, for a first version. (Note : Netlify it's just a first iteration of the website)

• Time taken since setup up to this first iteration (Note : due my first time using contentful)

  • 11/27/2020 - 12/11/2020, 12 days.
  • Hours 61 hrs estimated. Google Spreadsheet tracking my progress (opens new window)

Benchmark in Wordpress

Benchmark in Netlify

Well, because we badly assume the client would want such template we purchased, it turns out that's not what it wants. Nevertheless we still working now, again in the client side.

Well we have to deal with the consequence of our assumptions and move on.