Giter VIP home page Giter VIP logo

jamstack-ecommerce's Introduction

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
  1. Clone the repository
$ git clone https://github.com/jamstack-cms/jamstack-cms.git

$ cd jamstack-cms

$ yarn
  1. 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 */]
  1. 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
  1. Deploy the back end
$ yarn run jamstack-push
  1. Run the project
$ yarn run jamstack-develop
  1. Sign up and then sign in with an Admin email address by clicking on the Profile link in the footer.

  2. 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.

  3. 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-ecommerce's People

Contributors

dabit3 avatar petermekhaeil avatar stav avatar swyxio avatar thorsten-stripe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jamstack-ecommerce's Issues

[BUG] Demo Site โ€“ Remove item from cart

Steps to Reproduce

  1. Add a single item to the cart multiple times
  2. View cart
  3. Remove 1 of the duplicate items

What's Happening

All duplicate items are removed

What's expected

Only a single duplicate item should be removed


Looks like it's due to the fact that removal is based on id and they're all the same ... Bunch of different ways to go about fixing it, just wanted to mention it exists. Nice work on this, btw. Really digging the simplicity of the store design.

Don't find gatsby

Hello Nader and everyone,

Maybe i'm too dumb, but I follow all the instructions on git and on https://dev.to/aws/building-a-serverless-jamstack-ecommerce-store-with-gatsby-aws-303f, and I dont't find anything about gatsby.

I clone, go to the good directory, npm install, and then I want to do Gatsby develop, and that don't work :'(

npm run dev work perfectly, but really want to have the same things as Nader Dabit

I try npm install -g gatsby-cli, and creata a new project but i cant clone yours in it :'(

So if you can give me some advice, i take it.

Good day to you.
Nab

Bump this up to Next 14?

This project seems discontinued. It's a pity. People still need a super simple and clean eCommerce site without all the burden of a backend.

Anyone who bumped this up to Next 14? Anyone built i18n for this? Thanks.

Navbar links rise a problem

When user is not on Homepage /, a problem occur in the navbar links. All links link to a misplaced file.

  1. Navigate to the New arrivals page
  2. Now click on another navbar link, such as Sofas
  3. A 404 page is showen, /new-arrivals/sofas Not Found

Why the problem occur ?

In the following JavaScript code,

<Link to={l.link} key={i}>

link values are missing a / prefix. And it render as:

<a href="sofas>

How can we resolve the issue ?

Prefix all links with a /.

<Link to={`/${l.link}`} key={i}>

As far as disorganized, this is king (of disorder)

I honestly, have not seen a more disorganised piece of work.

I respect the thought that was pulling it together, but fundametally, you owe it to yourself to organise your code in a fashion that succeeds you as the developer.

As a mode to train, I would advise against using this, but this is a learning opportuntity for any developer out there.

Your code is your thoughts. Your thoughts are the base of which other developers build. Shit code leads to shit builds, and this is perfect in example.

I need to strip it all the way down to make it useful.

Note, I'm not being a pain for no reason, but anyone who organises their folders like this project deserves a beating

Dockerise this application

Hi team,

I would like to contribute to this project by dockerising this application so that anyone can run this application on their local system just with a single command. I will also update the readme so that anyone can get started with this project easily.

Please assign this issue to me and I will get started with it right away.

Thanks

Inventory Management w. Stripe Work Around: Multiple Images Per Product

As a shop owner (non-technical user) I want to...

...add multiple images to a single product; for example, couch A comes in multiple colors, the website should display a picture for each w/o treating each color-variant as it's own product.

NOTES:

  1. This is a shortcoming with the stripe inventory management CMS.
  2. You can do this via a call to the Stripe API, but (a) the inventory management dashboard still only shows one image and (b) this issue was created assuming the shop owner is a non-technical user

Great Site, Can Stripe be replaced? and with what?

Hi, how are you?
I was interested in using this site as a theme for my own little project known as Sepochi Co but saw that stripe is required and that turned me off.
I don't refuse, stripe is a great payment processing platform but i live in an unsupported country and Stripe Atlas is too pricy for me. What other alternative exist that are world wide and how can i integrate them and remove strip.
Kindly help me.

stripe is not processing charges

I'm starting to understand how Gatsby and still fail to understand how this completely work.

My main goal is to upload it to netlify, use netlify login to access the admin site and use netlify cms to edit or add items.
Then I would like to process every payment and create invoices with automatic mails with stripe.

First things first, I want to proccess the payment for a simple sofa and I'm having a little trouble with it.

When testing the website after gatsby develop, I don't see the charge at stripe dot com.
I'm using the testing publishable key.

In stripe the only thing I see is an API call to:
/v1/payment_methods

2020-08-31 223025

But I can't see the charge in payments, nor the item details in the call...
Is it necesary to use the lambda.js?
And how exactly could I run lambda.js? is it a node.js code? do I need to upload it as a micro-service elsewhere? I figure I should add the secret API key there but is it really necessary?

For now I'm just testing everything locally.

Thank you so much, this is looking too good. Any help or advice will be much appreciated.

Does not appear to be Gatsby project

Hi Nader,
I too have had this issue where the Gatsby project JAMstack-ecommerce appears to be a React project.
I loaded as per your specifications
https://dev.to/aws/building-a-serverless-jamstack-ecommerce-store-with-gatsby-aws-303f
Tried gatsby develop and got failure.
Bit of muting around and then Trying npm run it started on Localhost:3000

On closer inspection it appears to not be a Gatsby project?
Do you have the original somewhere else maybe and it got moved?
Like Nabuko I too would like to try this out Gatsby Amplify etc
This is the link to the repository from the page that I loaded

https://github.com/jamstack-cms/jamstack-ecommerce

Really hope this is able to be corrected as really would like to Try a Gatsby AWS Stripe project
Thanks in advance Mark

I can't log in to admin or create an account

I followed all the steps in this tutorial:
https://dev.to/aws/building-a-serverless-jamstack-ecommerce-store-with-gatsby-aws-303f

But when I go to the Admins panel in the bottom right navigation, the Sign Up/ Sign In buttons don't do anything.

I was trying to create an admin account and got the email with a verification code, but when I put the code in, the button didn't do anything.

Now neither buttons work and I'm not sure why.

I don't know if this will help but here is a screenshot of the console:

console-screenshot

Any ideas?

Can stripe be replaced with something like paypal?

Hi, how are you?
I'm interested in using this theme sadly both me and my client live in stripe unsupported country. And Stripe Atlas is an additional expense that my client isn't interested in. So is there way to replace stripe with Paypal? If so can you help me do it or pay you to do it for me?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.