A go through of prismic implementation journey for a tutorial site on vue js

This post is an overview of how you can approach a site that you want to build using Prisimc service integration, so this would be less of a technical code implementation walthrough and more of a go through of how we planned and diverted from implementing our site so you can take some cues from it. I am going to refer the site built on the same platform that is the Pepipost tutorials section (specifically the tutorial section) you can check it out here since that was the project I will be referencing.

And before the article continues, I want to make clear that I am not specifically an expert on these technologies, this will be a big note on how I was trying to implement this an how I found certain things that work and my trials with Vue js, cause this was the first time I was Implementing it. With these points in mind let's go forward with the journey.

Prismic Platform:

• So first things first. What is the scenario we would be using Prismic?

• Basically, if you want a centralized control for all of your content independent of your system and want to provide access to multiple users to anyone in the world Prismic is your answer. It is an online service you can use as an independent CMS.

• So we had the same requirement and wanted our tutorials to be editable by anyone posting it and the posts that can be posted by anyone by any external contributors.

What about WordPress?

Well, we do have our site on WordPress and did have our tutorial section on that, but we wanted the new framework to be malleable to our campaigns that we will be posting on our site. Also, we wanted the site to be faster, Seo optimized and to be compatible with google crawler. So with that, here comes our second scenario.

Framework and language:

• Second is the language and framework we want this to be built in. In the initial phases of planning and deployment, because Prismic allows unlimited calls to the API on the free plan, we thought it will be a really good idea to use a frontend framework and since I didn't have much experience in front end framework other than Vue, I took it forward as our main framework for the project to be built in.

Searching and ordering:

• Initially, we had decided to use Algolia as our search service but since prismic provides us the search API through queries we decided to stick with it.

Vue integration with prismic:

• Prismic API services use GraphQL format for sending queries in order to customize the API calls according to our needs. If you are building a system from scratch it provides detailed documentation about the API requests on the many frameworks and languages yes on js and on Vue js too.
• But if you are a beginner like me or you don't want to waste time setting up the API and structuring the framework you can use the Vue starter kit in case you want a quick headstart.

SEO optimization:

• Here is where we faced one of the challenges with Vue since it renders the content after the Prismic API call we can see that there is a loading time for the contents on the pages.
• And google crawls that so on the SEO point of view we had failed to generate any meaningful content on google crawl. Our site was fast and google was ranking it but the content was missing. This would cause your site traffic to fall drastically.
  • The first thing you will say that adding a loader on the page will help with this. Yes and No. Yes it will look like the content is loading to the user, but the google crawler won't wait for the page content to load, it crawls the page the instant it is loaded.
  • Also the page title, description and other meta tags are set dynamically from the API response they won't be set properly.
  • You see, in case of a static site the content is readily available at the time of load since no latency is there fetching the content.
• Since we had spent so much time integrating and implementing this project, we cannot turn back to a backend implementation with a database that will require us to sync data to the SQL regularly in case of content which will take a lot of time to build. The solution to this will be discussed in the next section.

Server side rendering:

• This was a lifesaver for us. You can use Nuxt.js to implement the server-side rendering you can check it out here. It provides a well-structured code frame on which you can develop your Vue js applications.
• Due to server constraints and since it was going on our live server where many services reside we used the Prerendering as a solution to our newfound limitations.

Prerendering

• Prerendering is a process in which the server creates static html copies of the site's dynamic pages by literally loading the page in a browser and copying the loaded html code from it. After this, you will route the site URL to hit the main index page of the generated html directory which is by default named dist and you are ready to use this generated html pages as your static site.
• What do we require for prerendering:
  • NodeJs - To use the prerenderer library you have to install this since it is a NodeJs library.
  • PrerenderSpaPlugin - You need to install this using npm
• After you install necessary libraries, you need to add all of the Routes you need to be rendered in an array structure. Manually yes. If you have to figure it out if you want to add it dynamically.
• After that there are certain lists of things you need to keep in mind:
  • Prerendering takes server resources you can make it such that the static web pages are built on one server and then pull it on another server to update the content or to add new pages.
  • If you will be adding new pages routes all the time (since it is a tutorial site), you need to make changes to the vue config file.
  • Change Timeout to 0 - Since it will take a long time to render all of the routes you will be updating, it is sure to time out after some time.
  • Enable headless mode - Since we want this to happen internally without opening the chrome browser UI on the server
  • Set Concurrent execution to a limited number - Else your server will not be able to handle the number of concurrent processes and the main process will die.

Disabling JS Scripts

• Please keep in mind to remove the js script while rendering the page where it is not required, since what will happen is that the page will load with the static content once and then the latent script once loaded and active will call the Prismic API again to load the page which doesn't look nice.
  • You can do this by using a regex pattern to identify starting and closing script tags and removing it from the buffered html.
  • You can do this on certain routes by filtering the routes by the renderedRoute parameter

After the set up is done, we build the npm pages and were able to see a fast, SEO friendly site powered by vue and prismic. Let me inform this is not a perfect setup and more work has to be done to make it seamless and less manual interaction. But for now, for what time we had we are using this setup for our needs.

Hope you all can take something out of it and plan your setup better in order to integrate prismic or other platform with your Vue setup.