Short Insight Into Webiny

In this article, lets have a deep introduction about webiny and how to design a website with some default web pages.

In recent times, there has been a huge demand in performance due to availability of large applications and data, as a result many companies are relying on cloud technology as they can scale their applications fastly and that too with lower costs. This is the major reason why Serverless Architecture gaining significant role in the market.

“I think of Serverless as a development infrastructure as a service where you are orchestring things together without having to think about the physical architecture underneath it at all.” said Derek Tiffany.

what is webiny ?

webiny is a CMS for serverless application development, we can build full stack applications and APIs, they also provide complete admin interface which is plugin based and it also provides us ready made apps.

Why you should choose webiny ?

webiny provides best user experience and comfort by providing a serverless environment that build with various technologies likeNode, React, and GraphQL, below image shows the companies that are using webiny.

We need to install 3 tools for creating and setup of webiny project, they are:

1. NVM
2. LTS of node
3. yarn

Installation of NVM :

For installation of NVM, use the following cURL or Wget command in your terminal window by copy-pasting it.

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

or

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

After the completion of installation, to check whether nvm is running or not, type nvm list. This command will show you node versions installed in your system.

Installation and uses of current node VERSION(LTS)

Now, to check the current LTS version, go to https://nodejs.org/en/ and check the current LTS version and then run the following command:

nvm install <Current LTS Version Of Node>

now, replace <Current LTS Version Of Node> with latest node version. so we will change the command in following way

nvm install 12.19.0

After completion of installing it, we need to make sure that we are in current node version, hence we need to cross check by running following command:

nvm use <Current LTS Version Of Node>

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

Installation of Yarn:

For installing Yarn, first go to the installation page i.e https://classic.yarnpkg.com/en/docs/install/#windows-stable

Note : choose a version less than 2.0 because webiny does not yet supports version 2.0

After completion of installation, to check the version, type the following command:

yarn -v

Now as we completed installing the tools, our next job is to configure AWS credentials :

Configuration of AWS Credentials :

Firstly, visit the AWS Management Console in the following link:

https://aws.amazon.com/console/

Now, sign in if you have an account else, create one.

After logging in, you will find a list of AWS services, search for IAM service which will be under security, Identity and Compliance.

when you select IAM, you will be visiting IAM dashboard which is under management tab on your left, then click on Users

then, in Users page, select Add user

After clicking on Add user, you will be heading to add user page. Then, type the name of the user and make sure in checking the Programmatic access under Select AWS access type.

After selecting on Next, you will be asked for setting up of permissions to the user then, make sure in selecting Attach existing policies directly tab, and check the AdministratorAccess policy.

Now, you will be headed over to SetTags, its not manadatory and you can skip this step, after this you will be taken to review user. Your page should lool like this :

After selecting create user, you will visit User dashboard, then an Access key id and a secret access key will be generated for user you created.

Now, lets setup these credentials in our local machine, Set credentials in AWS credentials profile file on your local system, located at:

~/.aws/credentials on Linux, unix or macOS.

C:\Users\USERNAME\.aws\credentials on Windows.

Now open the file and replace your_secret_access_key and your_access_key_id generated for the user in the previous step. Save changes and setup the environment variables.

use the following to setup variables on Linux, macOS or Unix :

export AWS_SECRET_ACCESS_KEY=your_secret_access_key

export AWS_ACCESS_KEY_ID=your_access_key_id

For setting up variables on Windows, use :

set AWS_SECRET_ACCESS_KEY=your_secret_access_key

set AWS_ACCESS_KEY_ID=your_access_key_id

Setting up of MangoDB Atlas :

Now, let us begin setting up MangoDB in cloud. Go to MangoDB Atlas site and login. If you are not having an account, then create a starter cluster having default values. When cluster is created, then we will whitelist some of the IP addresses, so that we can connect to a database.

Visit Network Access tab under security :

select Add IP Address, then a window will be popped.

Then, Accept the default values and also make sure to select Allow Access from anywhere. And also to switch off this option for production purposes.

soon, after this process visit Clusters option under Data Storage tab.

Then, select Connect, a new popup window appears.

Now, create a MangoDb user and make sure that you remember your password or you can even store it.

Then, select Choose a connection method

You will get a connection string, replace the password with your user password and dbname with your database name. (dbname is your cluster name) in the connection string. This string assists us in establishing connection.

Creation Of webiny Project :

For Starting a webiny Project, open terminal and visit the directory where you wanted the location of the project to be created and make sure you selected an empty directory, then run the following mentioned commands on your terminals

npx create-webiny-project new-project

Generally, this process consumes some time like 5–10 minutes. Then the command installs all necessary packages required for setting up webiny project.

After Installation completes, visit the directory in which you installed it and then open new-project directory in IDE you are comfortable with. Then visit .env.json and replace [MONGODB_SERVER] with the string you obtained above (make sure to replace password and dbname with your credentials).

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

yarn webiny deploy api — env=local

After deploying, it takes some time then we will get 3 urls , one of which will be content we create using webiny. Run the following command in your terminal

cd apps/admin && yarn start

Generally we are building the Admin application that we will use and after loading gets completed, we can create an admin continue and can continue with our development.

The main website is located under apps/site

And Finally we are done! we have been succesful in deploying our own API Environment and now you can start developing your applications on your local system.