Try our conversational search powered by Generative AI!

John-Philip Johansson
Oct 30, 2018
  10217
(13 votes)

Introducing a new SPA template site: MusicFestival

To demonstrate some concepts that are useful when creating a SPA with working OPE, we have released a new SPA template site on Github, called MusicFestival, together with a series of blog posts that will be available in the coming days (a complete list is at the bottom).

You might have seen the site at recent Episerver Ascend events. It was built as a showcase demo for the new Episerver Content Delivery API, and has since then been modified to a smaller Single-Page Application (SPA) site that is intended to show how to work with On-Page Editing (OPE). It also uses the Content Delivery API with some customizations for friendly URLs and flatter JSON results. The site also uses CMS UI 11.11.0 which introduces some improvements and bugfixes for SPA scenarios.

The default installation contains some example bands generated by a random band name generator, so it’s possible to demo straight away.

We will dig deeper in other blog posts, but you can already enjoy it on Github

https://github.com/episerver/musicfestival-vue-template

We are not expert Vue.js developers, so there are probably improvements you can contribute.

Important: The template uses Vue.js but the concepts shown would be the same in React, Angular, or other client-side framework.

 

Blog series

Other blog posts

Oct 30, 2018

Comments

valdis
valdis Oct 31, 2018 08:12 AM

yup! :)

Thomas Higginbotham
Thomas Higginbotham Oct 31, 2018 05:49 PM

I see the MusicFestival site is using version 1.0.1 of the Content Delivery API. Are there any plans to update it to the 2.1.0 release?

I'm having some problems getting the new version to work, and I'm struggling to find any documentation on it.

Quan Tran
Quan Tran Nov 1, 2018 04:28 AM

Hi Thomas, we're upgrading MusicFestival to use ContentDeliveryApi version 2.1.0 and it will be available soon.

ContentDeliveryApi documentation is here ContentDeliveryApi dev guide

The ContentDeliveryApi SDK documentation is found here: ContentDeliveryApi SDK 

Lars Woetmann Pedersen
Lars Woetmann Pedersen Nov 5, 2018 12:26 PM

this looks very cool.

will you be showing how to use visitor groups with a SPA ?

John-Philip Johansson
John-Philip Johansson Nov 13, 2018 11:05 AM

@larswp the templates have a visitor group called "Last day", and the ContentDeliveryAPI team is working on visitor groups support (and other things that makes SPA's easier to work with in OPE).

John-Philip Johansson
John-Philip Johansson Nov 13, 2018 11:16 AM

@Thomas Higginbotham: We have now updated the template site to ContentDeliveryAPI 2.x. All related changes are in one commit so you can see what changes between 1.x and 2x: https://github.com/episerver/musicfestival-vue-template/commit/79558f80218350c31dc494b973b480f24c76bea7

Lars Woetmann Pedersen
Lars Woetmann Pedersen Nov 17, 2018 07:54 PM

Cool, i just tried the visitor group and that works 

I have another question then:

on a normal page or block i have a controller action. in that action i create a viewmodel, i add the model, and some calculated values to the viewmodel and give that to the view. The calculated values could be anything like the Current users Name or account information.

how would i do that with the ContentDeliveryAPI? can i call a controller and have the ContentDeliveryAPI return a viewmodel?

John-Philip Johansson
John-Philip Johansson Nov 26, 2018 08:09 AM

@larswp Interesting to hear that. Visitor group support hasn't been released yet :)

The ContentDeliveryAPI will serialize models by default. It can be extended through model mappers that you can read more about in the here:
https://world.episerver.com/documentation/developer-guides/content-delivery-api/serialization/

There is an example in the MusicFestival site that might help. We add language and parentUrl properties to each returned API result, and flatten the JSON so values aren't under a "Value" property:
https://github.com/episerver/musicfestival-vue-template/blob/master/src/MusicFestival.Vue.Template/Models/ExtendedContentModelMapper.cs

SReddim
SReddim Sep 13, 2019 08:06 AM

Hi, Can we use this with Vue and Nuxt Js? Can you provide any insight how we can do that with a sample routing configuration.

SReddim
SReddim Oct 31, 2019 08:21 AM

Hi We have a Client projct made with Vue Nuxt Js running seperately. Also have Episerver headless cms as back-end running seperately. Communication works perfect and we get content from server. 

Now we are trying to achive on page editing. Is it possible to do when we have client and server as seperate applications running at different ports. 

Client - localhost:3000 Server localhost:56312

We have used the epi-edit as it was in the Musicfectival project with out any luck. The Preview in the episerver window has blank screen. we do understand that the approach we had was only one way communication( request from client and content response is sent from server and server does not know anything about the Vue templates on client.)

Is it even possible to communicate backwards to be able to do onpage editing on server when content is previewed?

Any insight about how to achive on page editing when the client and server are seperate would be appreciated.

Please login to comment.
Latest blogs
Stott Security Version 2 So Far

In December 2023, I unveiled the initial version of Stott Security version 2. Although I typically announce each version I release on LinkedIn and...

Mark Stott | May 22, 2024

Optimizely Data Platform (ODP) Page Scroll Tracking

As with my last post, this isn’t a “getting started with ODP” — to get started with ODP, check out the developer docs,   “Implement the ODP...

Daniel Isaacs | May 22, 2024

Optimizely Search and Navigation – Part 1 – Search Tips

Introduction Search and Navigation is a cloud service provided by Optimizely to support building search functionality for both Optimizely CMS and...

Binh Nguyen Thi | May 22, 2024

From Procrastination to Proficiency: Navigating Your Journey to Web Experimentation Certification

Hey there, Optimizely enthusiasts!   Join me in celebrating a milestone – I'm officially a certified web experimentation expert! It's an exhilarati...

Silvio Pacitto | May 17, 2024