Orchardcore: Create SPA sample template

[hishamco]

It would be nice if we have a SPA template that's a show case for Headless CMS out of the box

/cc @dodyg @sebastienros

[sebastienros]

Could be a recipe, it could also be a guide. You could argue we could have a guide for the existing recipes too (Blog, Agency).

I think starting with a guide would be nice in this case, as this is more about showing how to do it that having a site ready that uses this technique.

/cc @jrestall who does it with react

[hishamco]

Perhaps a Blazing Pizza is a good example

[hishamco]

Could be a recipe, it could also be a guide

It could be, but I'd like to see a SPA on action with no razor no fluid, just HTML with little jQuery to consume the back-end APIs

[Skrypt]

You mean like what ABP does?

[hishamco]

ABP is a WAF, but what I'm asking for is just a show case, something similar to https://github.com/cofoundry-cms/Cofoundry.Samples.SPASite

_I'm a web dev who knows HTML+JavaScript only and I'd like to use Orchard Core as source of data_

[Skrypt]

Yeah but ABP uses themes and templates for each type of SPA frameworks like one for Angular, Vue.js, React ... With complete premium templates. Now, this Cofoundry sample looks more like a frontend dashboard.

[jrestall]

Having a 'Headless CMS' setup recipe would be great.

• Enable GraphQL module and permissions/authentication to execute graphql.
• Disable the frontend themes.
• Add a Home Route to point directly to /admin.
• Setup some default modules commonly used by headless sites. Metadata, Assets, Layers etc.
• Page content type.
• ...

I'm slowly working on gatsbyjs plugins for Orchard Core with a sample site. https://github.com/jrestall/gatsby-orchardcore/tree/master/example/site.

[hishamco]

Seems @sebastienros demo gatsbyjs year ago if I'm not wrong in ASP.NET Community Standup

[hishamco]

this Cofoundry sample looks more like a frontend dashboard.

No, it's SPA, all images except the first one shows how to manage the content, like what we did in the admin theme

[Skrypt]

I don't disagree that it's a SPA, though if you can manage content with it then it has content management which could be apparented to a frontend dashboard if you don't consider it as the OC admin. In OC this would need to be 2 separated SPA if you would want to use the content management as a replacement for the current admin. Unless you don't want to use the current admin at all ! 😄

[sebastienros]

Should we have two recipes:

• One Empty SPA Site Like "Blank" but with graphql, and no content types
• One "Pizza SPA" that would be the same as SPA but with sample contents

Also "some" spa template projects (other repository) to reuse the Pizza SPA. Can also be Blog if that's more common. We could also have a sample repos that would generate a static site from it.

What about authentication to make the graphql endpoint secure.

[hishamco]

I think the second option is good

We could also have a sample repos that would generate a static site from it.

This is handy for some scenarios like APIs docs, blog posts.. etc

[hishamco]

Can we do a Pizza SPA that using GraphQL?

[sebastienros]

We should write a guide that shows how to do spa applications with graphql. And maybe ship the result in the OrchardCore.Samples repository.

[dodyg]

We need to do three guides:

• Build traditional CMS from scratch.
• Build using decoupled CMS.
• Build using Headless CMS.

I can do the first two because I have a long real world implementation notes go guide me. I have zero experience with GraphQL.

[sebastienros]

We already published the decoupled: https://orchardcore.readthedocs.io/en/dev/docs/guides/decoupled-cms/decoupled-cms/

Please share the feedback.

If you want to work on the first one then I am ok with that. If you can follow the same format as the video I gave last year, reimplementing the Blog Theme. Creating the types, then a theme, then a recipe, that would be awesome.

For the headless, I could create a custom recipe, then show how to setup openid connect, and generate a static site from it. Maybe a small spa application too to connect to the same graphql endpoint.

[sebastienros]

I have made some good progress on the "traditional CMS from scratch" one. Building the site with types and parts is done, now starting theming. I am rebuilding TheBlogTheme somehow.

Difference with decoupled is that I introduced Autoroute +liquid pattern, and List

[dodyg]

I reviewed https://orchardcore.readthedocs.io/en/dev/docs/guides/decoupled-cms/decoupled-cms/ and it looks good but I think we can make the tutorial process more efficient in terms of the structure.

The tutorials can be broken down to three parts:

1. Code setup for Traditional / Decoupled / GraphQL
2. Content Modelling
3. The rest of Traditional / Decoupled / GraphQL topics

I think if we create a dedicated topics for Content Modelling, we can benefit the beginner and the intermediate users alike and it will cut down the size of the tutorial.

So in Content Modelling we can have:

• How to:
  
  
  
  • Model a Blog
  
  
  • Model a Blog with Categories
  
  
  • Model a Blog with Localization
  
  
  • Model an Event, etc
  
  
• Parts and Fields and how they are used in Content Modelling
  
  
  
  • Use Text Field with Select List for enumeration type of Content
  
  
  • When to use Flow
  
  
• Queries How to index and query contents for different purposes
  
  
  
  • Sort and List based on Dates or Status, etc
  
  

Then in the tutorials we can just do

1. Code Setup
2. Point the reader to complete Cookbook "Model a Blog"
3. The rest of relevant topics

Since the Code Setup is the same, we can even simply have a page with Code Setup for Traditional / Decoupled / GraphQL so the tutorial creation process will be

1. Point to Code Setup section.
2. Point the reader to complete How To "Model a Blog".
3. The rest of relevant topics.