Creating and deploying a website using Webiny Serverless CMS ⚡️ + Free SWAG 👚👕

| Note: This article is now slightly out of date. Please follow this article: https://docs.webiny.com/docs/get-started/quick-start

To prep for this tutorial there are a few prerequisites you'll need to have:

1. NodeJs - In case you don't have it installed, follow this tutorial
2. Yarn - Although it's a replacement for NPM, yarn comes with some added functionality, which is required to run Webiny.
3. MongoDB database - I would recommend using MongoDB Atlas free tier
4. AWS User credentials - Don't have one? Here is how to set it up

About the tutorial

In this tutorial, I'll walk you through steps of:

1. Installing and configuring Webiny
2. Deploying Webiny to your own AWS cloud
3. Getting back a CDN URL to access your site
4. Creating your first user
5. Creating your first page

About Webiny

Webiny is an open-source CMS (webiny/webiny-js) created for serverless web development. It comes with several ready-made apps like Page Builder and a File Manager. There is a GraphQL API with integrated security and an AWS Cognito user pool.

You can use Webiny to build websites, applications, APIs and microservices. All that inside a serverless environment. The Serverless Framework handles the deployment operation.

1. Installing and configuring Webiny

First, make sure that you've got all the prerequisites in place. They are at the top of the article.

Installing Webiny is a simple matter of running the following command in your terminal:

npm -g install @webiny/cli

Once the package is installed you can create your new project.

webiny create my-project
//note the link to the SWAG page 😉
cd my-project

This will create the full project structure, including any dependencies and configuration files you will need.

Before we can deploy our project, there is only one more thing we need to configure. Open api/.env.json file and change the value of MONGODB_SERVER variable to match your database connection string.

In case you are using MongoDB Atlas, just click on the Connect button in your cluster and select the application connection option. You will get the connection URL back.

2. Deploying Webiny to AWS

Webiny uses 2 commands for deployments, one deploys the APIs and the other one deploys the React apps. Both commands need to be run from the root of your project.

Let's say we are deploying the website into our dev environment. To deploy the APIs run the following command:

webiny deploy-api --env=dev

The first deployment might take 3-4 minutes to complete. The operation is deploying dozen lambda functions, several API Gateways, an S3 bucket, and creating a new CloudFront distribution.

After the deployment is done, you will see a screen with the URL to your API. It ends with /graphql.

Note: On the first deployment the URL will not work for about ~10 minutes. This is because CloudFront takes its sweet time to get created.

While you are waiting for the CloudFront URL to start working, you can trigger the deployment of the React apps:

webiny deploy-apps --env=dev

The same thing, in the end you will get a CDN URL back.

4. Finishing the installation

Once the URL starts working, point your browser to {cdn_url}/admin to finish the installation. This will trigger an install process. In the first step, you will create your admin user. After that just follow all the steps until the end.

5. Creating your first page

By default, Webiny will point you to a list of pages.

Click the big green button in the lower-left part of the screen to create a new page, this will open the page editor.

This video provides a good overview of how to use the page editor:

Done

Hope you have enjoyed this tutorial and learned a thing or two. In case you have any questions or comments, please post them below.

If you liked Webiny and wish to contribute to the project, we would love to have you. Join us on our Github.