| 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:
- NodeJs - In case you don't have it installed, follow this tutorial
-
Yarn - Although it's a replacement for NPM,
yarncomes with some added functionality, which is required to run Webiny. - MongoDB database - I would recommend using MongoDB Atlas free tier
- 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:
- Installing and configuring Webiny
- Deploying Webiny to your own AWS cloud
- Getting back a CDN URL to access your site
- Creating your first user
- 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
Connectbutton 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.
The Easiest Way to Adopt Serverless
Getting started
To get started with Webiny, simply follow this link
Webiny is the easiest way to adopt serverless!
Want to build an API? A React app? A full administration app for your product, website or mobile app? With Webiny you can do all that and then some! Your project will be bootstrapped and prepared for development of your next project in just a few moments. With the tools that come out of the box you'll be able to immediately deploy your project to the cloud (for now only AWS).
Our plugin-based approach to the whole system will make it easy for you to override, upgrade and tweak the system to fit your needs.
GraphQL API
Our API layer works as a collection of Lambda functions with Apollo Federation handling all the GraphQL-related stuff. But it is not limited…
Top comments (3)
Hi Aleksey,
it's a good question. At the moment we don't have a specific list, we hope to produce one in the near future.
To provide a bit more context. The specific set of policies will be defined by the AWS services you are deploying. By default, Webiny is deploying an Api Gateway, Lambda functions, S3 and a CloudFront service. However, if you decide to introduce another service say DynamoDB you would need to change the IAM policy. There are permissions that your AWS IAM user has (which is used for deploying the resources), and then there is also a question of limiting the permissions of each of the deployed resources by creating a specific IAM policy for each of them. As you can see it's a complex task, but one that is quite important from the security perspective and it is on our priority list. Best way to stay up to date is to subscribe to our newsletter list on our website, and we will let you know once we release this update.
Yes, the aws free tier is all you need to get started.
Thanks Sven, can you provide any estimates around monthly AWS costs to run a small traffic website with Webiny?