Giter VIP home page Giter VIP logo

slicknode's Introduction

npm version CircleCI Twitter Follow

Slicknode is an extensible, modular Headless GraphQL CMS for content management at any scale. Declaratively define your content model using the GraphQL SDL, and Slicknode provisions a highly scalable GraphQL API with global CDN and intuitive admin interface in seconds, powered by AWS Serverless:

Headless GraphQL CMS

Links:

Why Slicknode?

While there seem to be an endless number of CMS on the market, a lot of them have some fundamental shortcomings in their architecture that prevent them from fully utilizing the latest innovations in cloud computing. Modern development workflows are often cumbersome or impossible, that's why we created Slicknode.

Here are some of the problems that Slicknode solves:

  • Git-Workflows: The entire application structure and content model is stored in the local codebase, which can then be managed with version control like git and enable essential workflows like code review, reversing changes, feature branches, cloning etc.
  • Modular Architecture: It is often hard to reuse functionality or data models across projects. If you are building similar solutions, you often have to recreate the same thing over and over. Slicknode has a modular architecture from the core. This allows you to reuse, share and organize complex projects with copy + paste.
  • Flexibility: With a design around the open source GraphQL standard, you can combine Slicknode with any API, database, or existing IT infrastructure. Merge multiple GraphQL APIs into a unified data graph and bring it to the global edge network with Slicknode for ultra low latencies.
  • Scalability: Slicknode was designed with a cloud native architecture from the ground up. With serverless computing and a globally distributed CDN, it scales instantly to any traffic spikes without managing infrastructure. It further has no single point of failure and a self-healing infrastructure that seamlessly handles outages of entire availability zones.

Features:

  • Instant GraphQL API on managed cloud infrastructure
  • Modular architecture
  • Custom publishing workflows (e.g.: Draft > Review > Translation > Published)
  • Strong data consistency with referential integrity and automatic database migrations
  • Internationalization
  • Declarative permission model (for multi tenant SaaS, customer facing apps, enterprise etc.)
  • Powerful content modeling features with relations, union types, interfaces, enum types etc.
  • Multi-Stage development workflow
  • Works with any frontend technology (React, Angular, Vue, Javascript, iOS, Android etc.)
  • Extend existing GraphQL APIs
  • Apollo Federation
  • Extensible with custom code (Javascript, TypeScript, Flow etc.)

Quickstart

This is a quickstart tutorial to create a Slicknode project from scratch. If you would rather start with a fullstack application, check out our NextJS blog starter

To get started with Slicknode create a Slicknode Cloud account:

Sign up for free (No credit card required)

Installation

The Slicknode CLI can be installed via the terminal using npm. (How to get npm?)

npm install -g slicknode@latest

Usage

Initialize

To create a new Slicknode project, navigate to the folder where you want to create your new project and run:

slicknode init quickstart-project

# Change into the newly created project directory
cd ./quickstart-project

This will ask for your Slicknode login information when run for the first time. Enter the login information that you used when you signed up.

Adding Modules

Modules are the top level building blocks that let you organize your project in a modular way. They allow you to reuse functionality across multiple projects or to share them publicly with the community.

Now, add some builtin modules for content management and image handling to your project:

slicknode module add image content

Then deploy the changes:

slicknode deploy

Creating New Modules

Your own types will be added in your own modules. To create a blog for example, run:

slicknode module create blog

It will suggest a namespace and the label that will be displayed in the data browser. Just hit enter to use the suggested values for now.

This will create the following file structure in your project folder:

modules/
    blog/
        slicknode.yml
        schema.graphql
slicknode.yml

Model your schema

You can model your schema using the GraphQL SDL.

In your favorite editor, open the file modules/blog/schema.graphql and enter your schema, for example:

"""
A blog article
"""
type Blog_Article implements Content & Node {
    id: ID!

    title: String!
    image: Image
    slug: String! @unique
    text: String @input(type: MARKDOWN)
    category: Blog_Category
    createdAt: DateTime!
    lastUpdatedAt: DateTime
    
    # Content interface fields to enable content management
    contentNode: ContentNode!
    locale: Locale!
    status: ContentStatus!
    publishedAt: DateTime
    publishedBy: User
    createdAt: DateTime!
    createdBy: User
    lastUpdatedAt: DateTime
    lastUpdatedBy: User
}

type Blog_Category implements Content & Node {
    id: ID!

    name: String
    slug: String! @unique

    # Content interface fields to enable content management
    contentNode: ContentNode!
    locale: Locale!
    status: ContentStatus!
    publishedAt: DateTime
    publishedBy: User
    createdAt: DateTime!
    createdBy: User
    lastUpdatedAt: DateTime
    lastUpdatedBy: User
}

Save the file and check if you have any errors in your project by printing the project status. Run the status command from the project folder:

slicknode status

Deploy

To deploy the changes to the cloud, simply run:

slicknode deploy

Now you have a production ready content HUB with GraphQL API.

Explore

To explore your newly created GraphQL API, open the playground:

slicknode playground

This will open the GraphiQL playground for your API. (It might ask you for your login credentials)

To open the CMS data browser of your project:

slicknode console

Show the GraphQL endpoint that you can use with your GraphQL clients:

slicknode endpoint

Next Steps

Explore the full potential of Slicknode. Here are a few topics that can get you started:

Join our Slack community!

  • Tutorial: Build an advanced blog application in a step by step tutorial.
  • Client Setup: Connect your frontend application with the Slicknode server
  • Writing Extensions: Write custom extensions to add any API and database to your application
  • Auth: Secure your application and write complex permission rules that span multiple tables.
  • Data Modeling: Learn how to model the data for your application

Follow us on Twitter and Facebook.

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.