Saturday, July 11, 2020

How to use NETLIFY for publishing website and netlify lambda functions?


publish website using Netlify

NETLIFY is an awesome service that provides hostingserverless backend, analytics, free SSL, etc with a great free tier. It is a fast and easy way to build your website for testing and production. You can consider this service as an alternative to Firebase, Github Pages, or any shared hosting platform. You can use Netlify to host your static or dynamic website for free.
Netlify lambda functions use AWS lambda functions under the hood, AWS does have a free tier but its quite difficult to use. Netlify abstracts the complex wiring for you and provides easy APIs to use these lambda functions.
Today we will cover all the following stuff to get you started with Netlify.
  • Deploy the website to Netlify using the dashboard.
  • Connection your website with your domain.
  • Deploy website using GitHub continuous integration.
  • Developing Netlify lambda functions.
  • Use the NPM package in Netlify lambda functions.
  • Develop and deploy the simple jokes app

Deploy the website to Netlify using the dashboard.

  • Register to Netlify: Its a simple and easy process, Just go to Netlify Signup and register yourself in your preferred way.
  • Once you logged in you should get something like this.Netlify Dashboard
  • Now Drag and drop your website folder into the drag and drop section. I have a simple project in my local system I am going to deploy that.
  • Once you drop your code you will see the URL provided by Netlify for your website on the top.

Connect your website with your domain.

  • Copy the URL  provided by Netlify for your website and go to your domain manager.
  • Netlify suggests changing the nameservers of your domain but I don't like that idea.
    Add a CNAME record
    Cname
    here I am using the subdomain that why I used tell-a-joke as the name, If you are using your root domain, leave it blank or put @ and my Value is nruffled-khorana-8c57e9.netlify.app (the URL provided by Netlify for my website)

    You can read more if required from here
  • From the dashboard, you will see the websites uploaded by you. Select the website to which you want to add the domain and navigate to Settings -> Domain Management

    Domain config
    Click on add domain and enter the URL of your website. Your domain will be verified within a few minutes and free SSL will be activated automatically.

Deploy website using GitHub continuous integration.

  • Push your code to GitHub and navigate to Settings -> Build & Deploy -> Continuous Deployment.
  • Click on Link site to Git 
  • Click on GitHub and add select the repository you want to add and then click on deploy site

    Github authority
  •  Under overview, you will recently publish code.

    recently published
  • whenever you push your changes to Github, your code will be build based on the recent changes.
    If you want to stop continuous deployment you can click on the recently published code and Lock publish to this deploy and change to stop auto-deploy.

    stop continuous deployment


Developing Netlify lambda functions

Netlify provides lambda function which is a serverless backend service. Under the hood, it uses AWS lambda functions, but Netlify removes all the complexity and gives an easy to use interface.
  • To create a lambda function create a folder with any name you want (I am using API), inside that folder create a JS file( I am creating getJoke.js). keep in mind that the folder and file name will be the URL.
  • Add the following code to the JS file (getJoke.js)
    exports.handler = async (event,context,cb) => {
    return {
    statusCode: 200,
    message:"success",
    body: "Here is a joke",
    }
    }
getjoke.js
  • Create a netlify.toml file and add the following code.This file will indicate which one is the function directory and what command to run

    [build]
    functions = "./api"
    command = "npm i"

netlify.toml
  • Commit and push the code to GitHub, If the continuous integration is activated then your functions will be automatically deployed. You can verify the functions in the functions tab
    functions tabs
    click on it to view the URL


    endpoint

Using NPM package in Netlify lambda functions.

To use the NPM package in lambda function first make sure that netlify.toml file has command in it.
In this we will use Get me a joke package
  • Create a package.json by using.

    npm init -y

     
  • Install dependency by

    npm i give-me-a-joke

  • Replace the content in getJoke.js with the following content.

    const giveMeAJoke = require('give-me-a-joke');

    exports.handler = async (event,context,cb) => {
    function joker() {
    return new Promise(function (resolve, reject) {
    giveMeAJoke.getRandomDadJoke(function (joke) {
    resolve(joke)

    });
    })
    }

    //getting random joke
    let joke = await joker()
    return cb(null, {
    statusCode: 200,
    body: JSON.stringify({
    statusCode: 200,
    message:"success",
    body: joke,
    })
    })
    }


  • Deploy the code again, Once the code build successfully you should see the result as follow
API endpoint

Develop and deploy the simple jokes app

To create this app I am fetching the API we created and display the results in browser

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke teller</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
</head>

<body class="bg-primary">
<div class="container text-center mt-5 ">
<h1 class="header">Today's Joke</h1>
<div class="card">
<div class="card-body">

</div>
</div>
</div>
</body>

</html>

<script>
fetch("https://tell-a-joke.guidefather.in/.netlify/functions/getJoke")
    .then(function (response) {
    return response.json();
}).then(function (data) {
document.querySelector(".card-body").innerHTML=`<p>${data.body}</p>`

}).catch(function (e) {
console.log("Error",e);
});
</script>


index.html



tell a joke
End result

The code is available in my GitHub repository. Fell free to clone/download it to explore Netlify.
Netlify is an awesome service which does all the heavy lifting and gives an easy to use interface. Whether you are a complete fresher or an expert you can use Netlify to enhance your skills.

THANKS FOR READING