Frontstrap NPM

Frontstrap Frontity Theme

Primitive Digital

About The Project

This was created as an early experiment using Frontity as a headless CMS for WordPress. It was a great learning experience but the project got mothballed during Covid. We decided to fix a few issues with the existing deployment but are moving to an alternative approach for headless deployments.

Primitive Digital's Live Site 👉 Primitive Digital

GitHub 👉 @primitive/frontstrap

Theme NPM package ~ 👉 frontstrap (v1.0.x)

Rocks NPM package 🎉 ~ 👉 @primitive/rocks (v1.0.x)
Pebbles NPM package 🎉 ~ 👉 @primitive/pebbles (v1.0.x)
Scenes NPM package 🎉 ~ 👉 @primitive/scenes (v1.0.x)

Prerequisites

The following pre-requisites should be in place for the theme to work: 1. WordPress install of version 5.0 or later 2. Optional but highly recommended: register a domain 3. If deploying to Vercel install WordPress to a sub directory e.g. - wp.example.com 4. Posts permalink set set to: Custom Structure e.g. - /posts/%postname%/ 5. Set homepage to a static page 6. Custom Post Types feature require the use of the Advanced Custom Fields plugin

Installation & Development

Follow the Frontity setup outlined in their Docs

To use this theme You can install the theme and packages from the NPM/Github registry. You will need to extract the frontstrap package to edit 'src/components/dust/_config' and copy frontity.settings.js to the root of your project.

The simpler option is to clone the demo repo:

git clone https://github.com/primitive/frontstrap
cd frontstrap
npm install && npx frontity dev (from the project's root directory)

npx frontity dev

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

The site will automatically reload if you make changes inside the packages folder. You will see the build errors in the console.

Deployment

Follow the Frontity deployment outlined in their Docs

npx frontity build

Builds the app for production to the build folder.

This will create a /build folder with a server.js (a serverless function) file and a /static folder with all your javascript files and other assets.

Your app is ready to be deployed.

Ω - the end

☙ 🐒 ❦ 🐒 ❦ 🐒 ❧

Mastering Markdown

🃏 This code is opensource so play like you mean business 🤓

Crafted by Primitive Digital

npm.io

               #   ___          _   _          ___           |"|              .                   
     )))       #  <_*_>        '\\-//`        /\#/\         _|_|_         ,-_-|       `  _ ,  '   
    (o o)      #  (o o)         (o o)        /(o o)\        (o o)        ([o o])     -  (o)o)  -  
ooO--(_)--Ooo--8---(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo-ooO--(_)--Ooo--ooO'(_)--Ooo-