Getting started with webiny

A comprehensive guide to get started with webiny and setting it up with a website with some default pages.

With application availability and performance demands ever increasing, many companies are looking to the cloud to scale faster, with lower costs. That’s where serverless architecture comes into play. It is estimated that the Serverless Architecture Market will be worth $21.1 billion by 2025

“Serverless allows developers to focus on coding and less on operations,” said Duensing

With serverless, the “development team can think less about buying, operating, patching and upgrading infrastructure, because that’s probably not core to their business.”

So, what is webiny?

Webiny is the easiest way to adopt serverless and build full-stack applications and APIs. Moreover, they provide you with a full complete plugin based admin interface and a set of ready-made apps, so that you don’t have to start from scratch.

So, why choose Webiny ?

It is the only serverless environment built with technologies like React, Node, and GraphQL. So, instead of listing more reasons that why should you use Webiny, I will let their work do the talking. In the following image, you can see a list of top companies that use Webiny.

So, this should be enough to convince you to use Webiny.

So, lets get started

To create and setup a Webiny project, you will need to install three tools:

1. NVM
2. LTS of node
3. Yarn

Installing NVM

To install nvm, copy paste the following cURL or Wget command in your terminal window:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

or

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

After its installed, type nvm list to check whether its running or not. The command will give you a node versions installed in your system

Installing and using the current node VERSION (LTS)

Next, head over to the node website to check the current LTS version. Copy the current LTS version and again hop over to your terminal and run the command:

nvm install <Current LTS Version Of Node>

Replace <Current LTS Version Of Node> with the latest node version. (In my case it was 12.19.0 ). So, the command would be:

nvm install 12.19.0

After its installed, we need to make sure that we are using the current node version and to do that type :

nvm use <Current LTS Version Of Node>

Again, replace <Current LTS Version Of Node> with the latest node version.

Now, lets install our last tool and that is our package manager yarn.

Installing Yarn

To install the yarn, head over to their installation page. Choose your preferred version and install it. (Note — Webiny doesn’t support yarn version 2.0 yet, so choose a version less than 2.0). After its installed, you can check the current version using:

yarn -v

After installing all these tools, we need to configure AWS credentials:

Configuring AWS credentials

Head over to AWS Management console and sign in. If you don’t have an account, then create one. After logging in, you can see a list of AWS services. Look for IAM Service which is under Security, Identity and compliance. You can also search it in the search bar.

After selecting IAM, you will be headed to IAM dashboard. Under Access management tab on your left, select Users.

In the users page, click on Add User

After clicking on Add User, you will be taken to add user page. Type in the name of the user and make sure to check the Programmatic access under Select AWS access type.

After clicking on Next, you will be asked to set the permissions for the user. Make sure to select the Attach existing policies directly tab, and check the AdministratorAccess policy.

After that you will be taken to set Tags. We don’t really need tags, so skip this Step. After that you will be taken to review the user. Your page should look like this. Make sure you have selected the correct AWS type and given the correct permissions.

After clicking on create user, you will be taken to the User dashboard. A access key id and a secret access key will be generated for the user you have created.

Now, we are gonna set up these credentials in our local machine. Set credentials in the AWS credentials profile file on your local system, located at:

• ~/.aws/credentials on Linux, macOS, or Unix
• C:\Users\USERNAME\.aws\credentials on Windows

Open this file and replace your_access_key_id and your_secret_access_key with the Access key ID and secret access key generated for the user in the previous step. Save the changes and make sure to setup the environment variables

To set these variables on Linux, macOS, or Unix, use:

export AWS_ACCESS_KEY_ID=your_access_key_id
export AWS_SECRET_ACCESS_KEY=your_secret_access_key

To set these variables on Windows, use:

set AWS_ACCESS_KEY_ID=your_access_key_id
set AWS_SECRET_ACCESS_KEY=your_secret_access_key

Setting up MongoDB Atlas

Now we need to set MongoDB database in the cloud. Go to MongoDb Atlas site and log in. If you don’t have an account then register to get started. Accept the terms and conditions and set up your account and create a starter cluster with default values. After the cluster is created, we will whitelist some IP addresses, so that we can actually connect to the database.

Head to Network Access tab under security.

Now, click on Add IP Address and a window will be popped.

Accept the default values and make sure to click on Allow Access from anywhere. Make sure that to switch off this option for production purposes.

After its done, head over to Clusters option under Data Storage tab

Now, Click on Connect and a new popup window appears.

Create a MongoDb user. Make sure you remember or store your password.

Now click on Choose a connection method.

After that, select Connect your application option.

Now,after that you get a connection string. In the connection string, replace the password with your user password and dbname with your database name. (dbname is your cluster name). This is the string we would be using for connection.

Creating Webiny Project

Open the terminal and head over to the directory where you want to create the project. Make sure that the directory is empty. Now run the following command in your terminal

npx create-webiny-project new-project

This is gonna take some time, usually 5–10 minutes. This command installs all the packages necessary to set up a webiny project.

After it is installed, head over to the directory where you installed it and then open new-project directory in your favorite IDE. Now, go to .env.json and replace [MONGODB_SERVER] with the string you got above. (Make sure you replace password and dbname with your credentials).

After that open your terminal and head over to the directory where you installed your new webiny project, and then again head over to new-project sub directory in it. Now to deploy your API run the following command

yarn webiny deploy api --env=local

It may take some time and after its deployed, you will get three URLs, one of which will be the content you create using Webiny. Now again run the following command in your terminal

cd apps/admin && yarn start

Basically, we are building the admin application we will be using. Once the loading is done, the admin application will be created and you can create an admin and can carry on with your development.

The main website is under apps/site

This is it! In this tutorial we have deployed our own API environment. Now, start developing your apps on your local machine.

Common Mistakes

1. Forgot to add AWS credentials
2. Improper string formatting for MongoDb. Be sure to replace <password> and <dbname> with your credentials.
3. AWS service not activated. You may get this error if you haven’t set up your aws account. Be sure to verify your email address and setup your aws management account