Skip to content

bartoszstaryga/mgnl-spa-next-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Since Magnolia 6.2.14 please use External SPA.

External SPA capability makes it possible for SPA project to be running on a remote server.

Next.js demo can be found here.


mgnl-spa-next-js

Basic setup for Magnolia with WYSIWYG authoring and server side rendering with Next.js.

Prerequisites

  • Magnolia DX Core (due to CORS setup minimum version 6.2.5)
  • SPA renderer extended (git)
    Incubator module that extends the SPA renderer and offers remote loading for templateScript.
    In this case loading from Next.js server.
  • magnolia-services-licence (jar)
    Module required by SPA renderer extended.
  • Node.js

Overview

  • /spa-lm
    Magnolia Light Module.
  • /spa
    Basic Next.js project with page.

Installation

Next.js

  1. Navigate to /spa folder.
  2. Install all dependencies with npm i.
  3. Build page with npm run build.
  4. Start Next.js server with npm run start.

Magnolia

  1. Add spa-lm Light Module to Magnolia.
  2. In Configuration app replace /server/filters/cors with cors.
  3. In Security app:
  • Go to tab Roles.
  • Open rest-anonymous role.
  • In tab Access control lists find Website workspace and add Read-only for Selected and sub nodes for root node /.
  • In tab Web access add Get for /.rest/template-annotations/v1*.
  1. In Pages app:
  • Create new page with:
    • First dialog:
      • Page name spa-home. The root node name is hardcoded in /spa/pages/[[...pathname]].js.
      • Template SPA Home.
    • Second dialog:
      • Title of your choice.
  • You can edit it in Magnolia and add some components. You should see that http://localhost:3000/ renders page with content added via Magnolia's WYSIWYG.
  • Create new page child page under spa-home with:
    • First dialog:
      • Page name of your choice.
        E.g. contact.
      • Template SPA Basic.
    • Second dialog:
      • Title of your choice.
  • You can edit it in Magnolia and add some components. You should see that http://localhost:3000/contact renders page with content added via Magnolia's WYSIWYG.

Magnolia x spaExtended x SSR with Next.js tweaks/issues

  1. Notice in /spa/next.config.js the assetPrefix that points to Next.js server.
    For WYSIWYG editor spaExtended fetches page provided in Template script then renders it in iframe. This iframe source is in Magnolia's domain, hence need for full url for assets to ensure they are loaded from Next.js server.
  2. Current implementation of @magnolia/react-editor adds placeholders for Template Annotations. Placeholders are empty divs. Those placeholder are removed in Magnolia's WYSIWYG, but the currently implemented check does not take into account SSR.
    Generated page includes as many empty div elements as areas and components in the page. It needs to be taken into account when styling the page.

About

Basic setup for Magnolia with WYSIWYG authoring and server side rendering with Next.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published