Best CMS Solutions for Pinegrow?

General
21

Unclear how it relates to CMS though it’s an interesting thread. Will follow through there.

22

Hi @fakesamgregory , have you found a good way to do what You intended?

23

No I didn’t. Plenty of great PHP-based solutions but no native JAMstack solution.

I’m hoping one day this’ll be built in.

For now I’ve mostly been building completely static websites so the need has dropped off the radar.

24

what about vue designer? it’s definitely something to consider, specially for people like you who knows javascript

25

I should look into it. They seem to have done a great job but nothing will beat the speed and simplicity of a jamstack website. No libraries to download and Pinegrow already takes care of componentisation too. On first glance, Vue designer doesn’t solve any problems for me.

I should look into it and force myself to do a tutorial on it some time.

26

@TechAkayy I assume you know all things Vue. With regards to JamStack or pre-rendered content. Does the output contain even the slightest whiff of Vue at all? It could be a worthwhile substitution if it’s not downloading any libraries without my saying so

27

Hi @fakesamgregory :slight_smile:

Here is a sample Iles (similar to Astro) project - GitHub - Pinegrow/pizzeria-iles: Pizzeria Iles App

Try cloning it,

  • npm install to install dependencies.
  • npm run build to build the site. This will bundle everything into the dist folder that contains a static site with pure html/css/js & other assets.

image
image1920×1017 160 KB

You can now drag and drop this dist folder from your file explorer into Netlify drop - Netlify App, and the static site should be live in seconds.

As this is a static site, you don’t need a node server etc, can be deployed into any static hosting or a cdn.

Everything is bundled, minified, tree-shaken & optimized (incl vue, and any other dependencies), so nothing is externally downloaded, for eg, vue from a cdn, if that’s what you are asking.

28

As long as it tree-shakes Vue as a dependency. Or at least most of it. I’d be making calls to a headless CMS and passing them into the pages (I think I remember Vue doing this sort of thing in the config). I wouldn’t actually be using Vue for anything really. Just a vehicle to generate a static site with a CMS.

1 Like
29

At it’s core, Vue is a reactive library. We can import Vue’s reactive apis like reactive, computed., etc and use them even in a non-UI project (this is a nice read).

Vue compiling templates is an additional layer on top of Vue core.

So, vue bundled in the above sample project doesn’t do any template compilation during runtime, its just used for its reactivity only, and even the reactive imports are treeshaken so that only parts that are used are included.

There is a floating cart at the bottom right, and you can add pizzas to it from the Pizza cards.

Here is a slightly bigger sample project (Nuxt based)

The articles (under the hamburger) are all prerendered by fetching the articles from dev.to during build time. The blog (also under the hamburger) prerendered markdown files during build time.

Similar to the dev.to calls, you can do similar api calls to your CMS.

  • To build this as an SSR app (need a node-server) - run npm run build. This prerenders pages on-demand (on the node-server side) when user visits the page first-time & hydrates on client. This is the typical SSR-SPA pattern.

  • Alternatively, to build this as an SSG app (static hosting, cdn) - run npm run generate. This prerenders all pages during build-time. This is the typical SSG-SPA pattern.

3 Likes