Mobile Menu

Serverless Web Development Framework

  • Build Serverless Apps FASTER - All-in-one framework designed from ground up specifically for development of serverless applications.
  • Everything you need - ACL layer, Apollo GraphQL API, Admin UI, deployment mechanism, SSR, webpack & babel configurations, React components and much more.
  • Just add business logic - All is pre-configured so you can start coding your app right away without losing time on bootstrap and setup.
Get Started
Webiny Serverless Web Development Framework
Serverless by design
1.
USE A SINGLE COMMAND TO DEPLOY AND CONFIGURE SERVERLESS INFRASTRUCTURE
2.
FORGET ABOUT MAINTENANCE AND SCALABILITY HEADACHES
3.
DON'T OVERPAY YOUR CLOUD PROVIDER, PAY EXACTLY WHAT YOU'VE USED
Why go serverless? - Learn more
The foundation for building serverless applications
100% JavaScript - powered by React and Node.js
Designed using a microservices architecture
React-based Admin UI theme included
Deploy your app using Serverless Components
Support for multiple environments (dev/prod/stage)

Complete Serverless Development Stack

While building Webiny CMS we faced a lot of challenges. From architecture and performance to webpack configurations and deployments. Serverless is still a new thing on the market. It's hard to learn all the best practices and get all the tools and libraries working together.

This is why we build the Serverless Web Development Framework. So you focus on your business logic and leave the heavy-lifting to the framework.

Using this framework, we built the Webiny apps, such as the Headless CMS, Page Builder and others. You can rest assured that it works, it scales and it's easy to use.

Webiny Serverless Development Stack
Learn

GitHub

Explore and join our community on GitHub

Explore

Documentation

Discover the articles and guides on our docs portal

View Documentation
Storybook

Storybook

Browse our React components, which you can use to build your own apps

View Storybook

Features

Install via Yarn

To configure and install the complete environment, it’s a simple `yarn` command and just one configuration file. Learn more >

# Step 1. Install webiny-cli
$ yarn global add @webiny/cli

# Step 2. Create a project
$ webiny create my-project-name

# Step 3. deploy the API services
$ webiny deploy-api

# Step 4. deploy the API services
$ webiny deploy-apps

# Your project is live!
https://xyz.amazonaws.com/

Webiny CLI

Webiny CLI is the tool that you will use to build, watch and deploy your serverless applications.

CLI supports command like deploying only a specific service/API instead of the whole set, for much faster development experience.

CLI will also notify you via desktop notifications when the deployment is done, so you don’t need to watch the terminal all the time.

Usage: webiny <command> [options]

Commands:
webiny run <command> [options]         Run command defined in
                                       webiny.config.js.
                                       (NOTE: run from folder containing
                                       webiny.config.js)
webiny enable-tracking                 Enable tracking of Webiny stats.
webiny disable-tracking                Disable tracking of Webiny stats.
webiny deploy <folder> [resources...]  Deploy resources from <folder>.
                                       (NOTE: run from project root)
webiny remove <folder>                 Remove resources from <folder>.
                                       (NOTE: run from project root)
webiny scaffold                        Generate boilerplate code

Options:
--help     Show help                                                 [boolean]
--version  Show version number                                       [boolean]

Examples:
webiny deploy api --env=dev
webiny remove api --env=dev

Powered by plugins

From the ground up, Webiny is built on top of plugins, which are basically simple objects that consist of base "type" and "name" properties, and any other custom ones that you might need to get the job done.

{
  type: "my-plugin",
  name: "my-plugin-xyz",
  anAwesomePlugin: true,
  somethingNested: {
    myCurrentMood: "happy",
    getANewDate: () => new Date()
  }
}

Routes

Every single-page application consists of routes, and Webiny is no different! Adding new routes to your app is just a matter of creating a simple "route" plugin.

import { Route } from "@webiny/react-router";

(...)

{
    type: "route",
    name: "route-my-app-products",
    route: (
        <Route
            exact
            path={"/my-app/products/:id"}
            render={() => <ProductsForm/>}
        />
    )
}

Menus

What good are routes if you cannot access them via the user interface. But don't worry, Webiny's got you covered here as well! With "menu" plugins, you can easily create menus that can be organized in any way you like.

{
  type: "menu",
  name: "menu-my-app",
  render({ Menu, Section, Item }) {
    return (
      <Menu name="my-app" label={"My App"}>
        <Section label={"Products"}>
          <Item label={"Products List"} path="/my-app/products" />
          <Item label={"Manage stock"} path="/my-app/products/stock" />
        </Section>
        <Section label={"Customers"}>
          <Item label={"Customers"} path="/my-app/customers" />
          <Item label={"Discounts"} path="/my-app/customers/discounts" />
        </Section>
      </Menu>
    );
  }
};

GraphQL

All Webiny apps are powered by a GraphQL HTTP API which can be easily expanded with new fields, types, and resolvers. Creating a simple "graphql-schema" plugin is all that is needed in order to do that.

{
    type: "graphql-schema",
    name: "graphql-schema-my-app",
    schema: {
        typeDefs: gql`
            (...)
            
            type MyAppQuery {
                # Returns a single product.
                getProduct(id: ID): ProductResponse

                # Returns a list of products.
                listProducts(page: Int, perPage: Int, where: JSON, sort: JSON): ProductsListResponse
            }

            type MyAppMutation {
                # Creates a new product.
                createProduct(data: ProductInput!): ProductResponse
                
                # Updates an existing product.
                updateProduct(id: ID!, data: ProductInput!): ProductResponse
            }

            type Query {
                myApp: MyAppQuery
            }

            type Mutation {
                myApp: MyAppMutation
            }
        `,
        resolvers: {
            (...)
        
            MyAppQuery: {
                getProduct: resolveGet,
                listProducts: resolveList
            },
            MyAppMutation: {
                createProduct: resolveGet,
                updateProduct: resolveList
            }
        }
    }
}

Models

For all database-related tasks, Webiny relies on the Commodo library, which is basically a set of higher order functions (HOFs) that let you define rich data model objects. Once you've defined your models, you can selectively expose needed data and functionality via your GraphQL schema.

import { pipe, withFields, string, number, boolean } from "@webiny/commodo";
import { validation } from "@webiny/validation";

// Create a new "User" model that consist of a couple of fields.
const User = pipe(
    withFields({
        firstName: string(),
        lastName: string(),
        email: string({ validation: validation.create("required,email") }),
        age: number(),
        enabled: boolean({ value: false })
    })
)();

(...)

// Later down the road, you can create model instances, populate them
// with data, do complex data validations, and save the data to a database.
const user = new User();
user.populate({
    firstName: "Adrian",
    lastName: "Smith",
    email: "[email protected]",
    enabled: true,
});

await user.save();

Ready to try it out?

Get started with our step-by-step tutorial.
It's only gonna take a minute.

Quick Start

Have a question or need help?

Join our community of developers and fellow Webiny users. Share your experiences and ask questions.


Build Websites, Apps and APIs With Webiny
As a Developer You Will Benefit From Several Features

  • Admin theme icon

    Comes with an admin theme with over 30 React components

  • SSR icon

    Built-in server side rendering

  • CSS-in-JS icon

    CSS-in-JS via Emotion

  • CLI icon

    Deployment CLI with support for multiple environments

  • Build sites and apps icon

    Foundation for building dynamic serverless sites and apps

  • AWS Lambda icon

    Designed and optimized to run inside AWS Lambda

Using Webiny You Get the Full Spectrum of Serverless Benefits Out of the Box

AWS Logo

High-availability and fault tolerance built in

AWS Logo

99.999999999% (11 9’s) of data durability

AWS Logo

Event-driven scalability - pay for what you use

AWS Logo

Enterprise-grade secure and scalable ACL

AWS Logo

Great performance using a global CDN

AWS Logo

DDoS Protection of your
APIs

Explore Webiny Serverless Apps

Serverless Headless CMS

Headless CMS

GraphQL based headless CMS with powerful content modeling features.

Learn More
Serverless Page Builder

Page Builder

For when you need a quick landing page created without any coding.

Learn More
Serverless Form Builder

Form Builder

Create forms using a drag&drop interface and track how they convert.

Learn More
Serverless File Manager

File Manager

Upload, categorize, search and edit your files.

Learn More

Ready to try it out?

Get started with our step-by-step tutorial.
It's only gonna take a minute.

Quick Start

Have a question or need help?

Join our community of developers and fellow Webiny users. Share your experiences and ask questions.

Webiny free to use and released under the MIT open source license.
GitHub / Twitter / YouTube / Slack / Blog
Webiny Ltd © 2020

Email
  • We send one newsletter a week.
  • Contains only Webiny relevant content.
  • Your email is not shared with any 3rd parties.
By using this website you agree to our privacy policy
Webiny Chat

Find us on Slack

Webiny Community Slack