jamstack-cms/jamstack-cms

Modern full stack CMS. Built with Gatsby, GraphQL, AWS Amplify, and Serverless technologies.

JAMstack CMS (beta)

End to end serverless blogging & CMS system. Built with GraphQL, Gatsby & AWS Amplify. Theming based on the Novela theme by Narative.

Philosophy

JAMstack CMS is built to give you the ability to deploy a full stack serverless website in just a few minutes. JAMstack CMS includes the following features built in:

• Authentication & authorization for admin users
• Database with secure API access
• Server-rendered front end for builds
• Dynamic front-end for admins (enables admins to create, update, and delete content)
• Configurable settings
• Admin dashboard

Build time vs run time

With server rendered applications there are typically two types of execution environments, one at build time and one at run time.

The issue with dealing with server rendered applications in the traditional way was that it was not possible to make edits directly in the UI because the build would not accurately represent the current version of the application served at the last build time.

JAMstack CMS solves this issue by giving you two views at run time, including both the static build as well as a dynamic Admin view that allows you to manipulate content and preview pages before building.

This way you have the opportunity to test out new posts and web pages before deploying them to your live environment.

3 Ways to build a page

1. Static page - As with any Gatsby site, can still create a custom static page and route by just creating a new file in the src/pages directory. These pages will all be created at build time.

2. Blog post - In the Admin panel you can create Blog posts that will be dynamically generated at build time. These posts will be queried at build time from the server and used to build the pages. Any images referenced from your image gallery will be downloaded and served locally from the public/downloads folder.

3. Dynamic page - Similarly to creating a post, you can use the WYSYWIG editor and drag and dop interface to create web pages complete with rich text editing.

This is a beta version!

While the CMS is ready to deploy today as it is, this project is still in beta. There is quite a bit of work to do before I am ready to ship version 1. Here are some of the things I will be focusing on:

1. Improved accessibility
2. Performance
3. Comment feature
4. Native Gatsby theming
5. Enabling other cloud providers
6. More page boilerplates
7. Tests
8. TypeScript
9. Massive code cleanup 😅

If you are interested in contributing to this project, please let me know!

Deploying the CMS

1. Update the Amplify CLI to the latest version

$ yarn global add @aws-amplify/cli

2. Clone the repository

$ git clone https://github.com/jamstack-cms/jamstack-cms.git

$ cd jamstack-cms

$ yarn

3. Configure admin emails

Open amplify/backend/function/jamstackcmsc9ee2ce6PostConfirmation/src/add-to-group.js and update the admin emails for the users you'd like to add by adding them to the array of emails on line 7.

const adminEmails = ["[email protected]", /* ... other email addresses */]

4. Initialize the Amplify project

$ yarn run jamstack-init

During the initialization, you'll be prompted for the following

? Do you want to configure Lambda Triggers for Cognito? Y
? Which triggers do you want to enable for Cognito
❯◉ Post Confirmation
? What functionality do you want to use for Post Confirmation
❯◉ Create your own module
? Enter the name of the group to which users will be added. Admin

5. Deploy the back end

$ yarn run jamstack-push

6. Run the project

$ yarn run jamstack-develop

7. Sign up and then sign in with an Admin email address by clicking on the Profile link in the footer.

8. Once signed in as an Admin, you will see the Admin link in the navigation. Click on the Admin link to begin creating posts and pages.

9. Once you've created a post, run npm run jamstack-develop to create a new build and see the new live post.

Deploying to Amplify Console or Netlify

To deploy to Amplify Console or Netlify, you'll need to set the environment variable for APPSYNC_KEY. This value can be found in jamstack-api-key.js.

Webhook

Once deployed, you can configure the webhook url by running the following command:

$ node configureWebhook

---

Context

WordPress has dominated for quite some time with estimates that it powers around 30% of all websites today. One of the reasons for the popularity of WordPress is that it is composed of all of the elements needed for such a platform, including these necessary elements:

• Authentication & authorization
• Database
• API
• Front end

While WordPress started as a blogging tool, it has evolved over the years into a powerful website builder and a robust content management system.

With updated tooling on both the front end and the back end we are starting to see the need for similar tooling in our modern stack.

JAMstack CMS fills in this gap by giving you a customizable end to end solution allowing you to get up and running with a full stack serverless website & blog with just a few commands on your command line.

Features

• Authentication
• Sharable preview links
• Secure, signed images
• Admin panel
• Comments
• Server-side rendering

TODOs / Roadmap

• Comments
• Video support
• Dynamic logo from Admin
• Analytics dashboard
• Post categories
• WYSWYG option for blog posts
• Providers for non AWS specific services
• Custom authentication flow
• Offline / caching of posts
• Pagination of posts
• Dynamic dropdown menu of pages
• More articles from

Tools

Here are some of the tools used to build JAMstack CMS:

• Gatsby
• Emotion
• Date FNS
• Marked
• AWS Amplify
• Slate

jamstack-cms's Issues

An error occured during the push operation: null

When following the steps in "Deploying the CMS" in README, when I try to run the command

amplify push

I get the following error:

× An error occurred when pushing the resources to the cloud

null
An error occured during the push operation: null

Cannot edit posts in a deployed version of the app

Whenever I try to edit any post in a deployed version of the app I get this error:

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>BSDA3BD410F2SDSDCD252A</RequestId>
<HostId>
d/kZyIzqZC1RQmmPLOSDRutO14SDSDSu5AGbNXzyvStZ2i2kCKYvoA8J+qNuul2bYapCUey2uabdmzvfwk=
</HostId>
</Error>

Everything works as expected while running the app locally.

It seems that something happens between the user's click on the "Edit post" button and the edit post rendering. There is also this error in the console:

commons.js:26 Uncaught TypeError: document.createElement(...).getContext is not a function
    at Object.<anonymous> (commons.js:26)
    at i (commons.js:26)
    at Object.<anonymous> (commons.js:26)
    at i (commons.js:26)
    at Object.<anonymous> (commons.js:26)
    at i (commons.js:26)
    at Object.<anonymous> (commons.js:26)
    at i (commons.js:26)
    at Object.<anonymous> (commons.js:26)
    at Object.<anonymous> (commons.js:26)

Plase add package.lock.json or yarn.lock

Without it npm installs different versions, and the project might be broken with random error messages.

For example:

not finished load plugins - 0.671s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] jamstack-develop: `node createConfig.js && gatsby develop`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] jamstack-develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-11-05T12_00_51_245Z-debug.log

Caused by:
aws-amplify/amplify-js#4268

Confusing Name

I don't know if this is meant to be intentional or not, but the name is just awful. I fear that it will lead new developers learning about the JAMStack to think this is the defacto option for the JAMStack. And personally, trying to become popular by piggybacking off the name of an existing technology or architecture type to confuse users, just doesn't seem right.

So please, don't try to be intentionally confusing and either stick a disclaimer that this uses JAMStack philosophies and is not 'The JAMStack' or think about changing the name.

yarn run jamstack-init not displaying backend providers

When running the jamstack-init command, I cannot select a backend provider.
Am I missing an initial configuration step?

I am running windows 10 and have followed the steps in the readme

error on `yarn run jamstack-develop` with profile that is not the default

I got this error

"gatsby-node.js" threw an error while running the createPages lifecycle:

The AWS Access Key Id you provided does not exist in our records.

 InvalidAccessKeyId: The AWS Access Key Id you provided does not exist in our records.

Overwriting the default aws credentials, the process run fine.

Admin user isn't being added to admin group

I've started with a clean clone and walked through the kickstart. I have updated the specific lambda handler to include my email address. I also create a user with that email address. However, I do not get added to a specific admin group. I see the user added to a group whose name I supplied during the init ("jammies" in my case).

Looking through the code, it appears that this group name is what's sent to the PostConfirmation handler as the GROUP env variable. So, my user is, I think, being recognized as an admin, but that only causes it to get added to my 'jammies' group. I guess during the init it was asking me for the admin group name.

However, the fact that my user is in that group doesn't seem to matter, as I don't see the 'Admin' menu option and if I go there manually then all POSTs to the backend fail.

I noticed that in my Cognito setup I only have a PostConfirmation trigger and nothing else. Is that right?

I don't see what mechanism would be setting the page context's isAdmin and allowing me to see the menu (or successfully make calls).

Bucket names too long

I'm trying to simply test jamstack and followed the README.

While calling yarn run jamstack-init I got such errors:

CREATE_FAILED      S3Bucket
Bucket name should be between 3 and 63 characters long
CREATE_FAILED      amplify-jamstack-cms-de-161709-storagejamstackcms-F16NAOJ9V22H AWS::CloudFormation::Stack

I even tried using an very short environment name (only 2 characters) with no help. It seems like it simply creates too long names.

Comment feature

Hi Nader,

I went over the README, as you've already mentioned, the comment feature will be the most important feature, as it would increase engagement. Just wanted your thoughts on - If there was some native way of building the comments feature?
Disqus is great for most of them, but, I want something that goes with the website.
I'd also checked out staticman.

What your view? What would be the approach you'd want to consider for jamstack-cms?

Rich text editor is buggy

Ok, the rich text editor has quite a few bugs. Pushing a fix shortly.

.gitignore causing build failure in amplify website BuildPipeline

Hello Team,

The inclusion of the following statement is causing the build to fail on this.. The statement in the .gitignore is

# jamstack
jamstack-api-key.js

I hope this helps in resolving a solution for the same.

After uploading first image after deploying, cms crashes when loading images view.

Contributing to Jamstack-CMS

Opening this issue to see how others like myself can get involved with helping to further develop this. Happy to also help with anything like contributing documentation as well.

Turning text into a list while creating a page crushes the app

If I go to Admin->New Page
then click on Rich-Text,
then select piece of text and
turn it into a list (ordered or unordered)

the app crushes with:

Unhandled Rejection (Error): No serializer defined for node of type "list-item".
▶ 21 stack frames were collapsed.
getSerialized
src/components/pageTemplates/ParagraphTemplate.js:223
  220 |   }
  221 | } else {
  222 |   // Handle the extra wrapping required for list buttons.
> 223 |   const isList = hasBlock('list-item')
  224 |   const isType = editorValue.blocks.some(block => {
  225 |     return !!document.getClosest(block.key, parent => parent.type === type)
  226 |   })
View compiled
onChange
src/components/pageTemplates/ParagraphTemplate.js:1
> 1 | import React, { useState, useRef } from 'react'
  2 | import { css } from '@emotion/core'
  3 | import { BlogContext } from '../../context/mainContext'
  4 | import { Editor, getEventTransfer } from 'slate-react'

Still active?

I see this project has not been updated in a while but it looks like a great start to something super useful. Was curious to know if this is still being worked on at all?

AWSS3Provider - list error AccessDenied: Access Denied

When running yarn run jamstack-develop I get the Access Denied warning in the title and further down

ERROR

#11321 PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Access Denied