Vue, Refinery.io, Axios Website

In a previous article (found here) we gained a glimpse at Refinery.io a new SASS platform for creating AWS serverless applications. Now that simple example just showed a "hello...

2 months ago

Latest Post Kubernetes Cheat Sheet by Tyler Moon

In a previous article (found here) we gained a glimpse at Refinery.io a new SASS platform for creating AWS serverless applications. Now that simple example just showed a "hello world" response so its time to figure out the next step and use that response for something. This time we are going to display a list of names on a simple Vue.js website.

Vue (covered in this article) is an open-sourced progressive JavaScript framework for UI development. It is a relatively simple framework for quickly creating websites.

Axios is an HTTP browser for JavaScript applications. This simple framework allows for easy Ajax style HTTP calls from a client-side website. For our application, the Vue.js site will call the Refinery.io serverless app using Axios.

Prerequisites

Serverless App

First things first let us create our serverless backend. This app will be an API Gateway resource in front of a Lambda code block running Node.js 10.16.3. Open up a new app after logging into Refinery.

Open the "Add A Block" menu and then drag out an "API Endpoint Block"

Change the Block Name of the Endpoint Block to "GET Users Endpoint". This endpoint will eventually respond with a list of "users".

Now let's add the Lambda code to the newly created endpoint. Open up the "Add Block" menu again and this time select "Code Block". Name the new code block "Get Users" and add the following code:

function main(block_input, backpack){
	var userArray = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157",
      "geo": {
        "lat": "-68.6102",
        "lng": "-47.0653"
      }
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info",
    "company": {
      "name": "Romaguera-Jacobson",
      "catchPhrase": "Face to face bifurcated interface",
      "bs": "e-enable strategic applications"
    }
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "Julianne.OConner@kory.org",
    "address": {
      "street": "Hoeger Mall",
      "suite": "Apt. 692",
      "city": "South Elvis",
      "zipcode": "53919-4257",
      "geo": {
        "lat": "29.4572",
        "lng": "-164.2990"
      }
    },
    "phone": "493-170-9623 x156",
    "website": "kale.biz",
    "company": {
      "name": "Robel-Corkery",
      "catchPhrase": "Multi-tiered zero tolerance productivity",
      "bs": "transition cutting-edge web services"
    }
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "Lucio_Hettinger@annie.ca",
    "address": {
      "street": "Skiles Walks",
      "suite": "Suite 351",
      "city": "Roscoeview",
      "zipcode": "33263",
      "geo": {
        "lat": "-31.8129",
        "lng": "62.5342"
      }
    },
    "phone": "(254)954-1289",
    "website": "demarco.info",
    "company": {
      "name": "Keebler LLC",
      "catchPhrase": "User-centric fault-tolerant solution",
      "bs": "revolutionize end-to-end systems"
    }
  },
  {
    "id": 6,
    "name": "Mrs. Dennis Schulist",
    "username": "Leopoldo_Corkery",
    "email": "Karley_Dach@jasper.info",
    "address": {
      "street": "Norberto Crossing",
      "suite": "Apt. 950",
      "city": "South Christy",
      "zipcode": "23505-1337",
      "geo": {
        "lat": "-71.4197",
        "lng": "71.7478"
      }
    },
    "phone": "1-477-935-8478 x6430",
    "website": "ola.org",
    "company": {
      "name": "Considine-Lockman",
      "catchPhrase": "Synchronised bottom-line interface",
      "bs": "e-enable innovative applications"
    }
  },
  {
    "id": 7,
    "name": "Kurtis Weissnat",
    "username": "Elwyn.Skiles",
    "email": "Telly.Hoeger@billy.biz",
    "address": {
      "street": "Rex Trail",
      "suite": "Suite 280",
      "city": "Howemouth",
      "zipcode": "58804-1099",
      "geo": {
        "lat": "24.8918",
        "lng": "21.8984"
      }
    },
    "phone": "210.067.6132",
    "website": "elvis.io",
    "company": {
      "name": "Johns Group",
      "catchPhrase": "Configurable multimedia task-force",
      "bs": "generate enterprise e-tailers"
    }
  },
  {
    "id": 8,
    "name": "Nicholas Runolfsdottir V",
    "username": "Maxime_Nienow",
    "email": "Sherwood@rosamond.me",
    "address": {
      "street": "Ellsworth Summit",
      "suite": "Suite 729",
      "city": "Aliyaview",
      "zipcode": "45169",
      "geo": {
        "lat": "-14.3990",
        "lng": "-120.7677"
      }
    },
    "phone": "586.493.6943 x140",
    "website": "jacynthe.com",
    "company": {
      "name": "Abernathy Group",
      "catchPhrase": "Implemented secondary concept",
      "bs": "e-enable extensible e-tailers"
    }
  },
  {
    "id": 9,
    "name": "Glenna Reichert",
    "username": "Delphine",
    "email": "Chaim_McDermott@dana.io",
    "address": {
      "street": "Dayna Park",
      "suite": "Suite 449",
      "city": "Bartholomebury",
      "zipcode": "76495-3109",
      "geo": {
        "lat": "24.6463",
        "lng": "-168.8889"
      }
    },
    "phone": "(775)976-6794 x41206",
    "website": "conrad.com",
    "company": {
      "name": "Yost and Sons",
      "catchPhrase": "Switchable contextually-based project",
      "bs": "aggregate real-time technologies"
    }
  },
  {
    "id": 10,
    "name": "Clementina DuBuque",
    "username": "Moriah.Stanton",
    "email": "Rey.Padberg@karina.biz",
    "address": {
      "street": "Kattie Turnpike",
      "suite": "Suite 198",
      "city": "Lebsackbury",
      "zipcode": "31428-2261",
      "geo": {
        "lat": "-38.2386",
        "lng": "57.2232"
      }
    },
    "phone": "024-648-3804",
    "website": "ambrose.net",
    "company": {
      "name": "Hoeger LLC",
      "catchPhrase": "Centralized empowering task-force",
      "bs": "target end-to-end models"
    }
  }
];

  return {
		statusCode: 200,
		headers: {
			"Access-Control-Allow-Origin": "*"
		},
		body: JSON.stringify(userArray)
	};
}
Lambda Node.js Code

The code block should look something like this:

Save the code blocks and then click "Save Project". That is all that is required for the serverless app so go ahead and click "Deploy Project" to deploy our app to AWS.

Vue.js Website

With our serverless API up and running, let's write the frontend to call and display our user list. Open up your code editor of choice (I have been using VSCode of late) and create a new file called "index.html". Add the following code to the new file:

<!DOCTYPE html>
<html>
    <head>
        <title>Vue Axios Refinery Example</title>
<!-- Load in Vue.js from the cloudflare CDN -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<!-- Load in Axios from teh unpkg CDN -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <!-- List of Users -->
        <div id="app">
            <ul>
                <!-- Vue.js foreach loop on the users array -->
                <li v-for="user in users">{{ user.name }}</li>
            </ul>
        </div>

        <script>
            new Vue({
                // Element to inject on
                el: '#app',
                // Data for the component. In this case just an array of users.
                data: {
                    users: []
                },
                // On create of the component
                created() {
                    var vm = this
                    var baseURL = "https://u45m7f05od.execute-api.us-west-2.amazonaws.com" // Add your base url from your refinery deployment
                    // Execute a GET request to the created API
                    axios.create({
                        baseURL: baseURL
                    }).get('/refinery/api/users')
                    .then(response => (this.users = response.data)); // Add the resulting data to the users array
                }
            });
        </script>
    </body>
</html>

And that should do it for this simple example.

S3 Bucket Deployment

To host our Vue website the simplest solution in AWS is a Static Website Hosted S3 bucket. On the top right of the Refinery window, there is a button "View Console Credentials". This will allow you to log into the AWS account that Refinery is hosting the serverless app on.

Log into this AWS Console and head on over to the S3 resource. Create a new bucket and name it "refineryexampleproj". In the bucket navigate to the "Permissions" tab and then the "Bucket Policy" sub-tab. Add the following permission policy:

{
    "Version": "2012-10-17",
    "Id": "Policy1569350035525",
    "Statement": [
        {
            "Sid": "Stmt1569350033654",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::refineryexampleproj"
        }
    ]
}

This policy will allow us to connect to our website from anywhere. Now upload the index.html file that we created earlier. Click on the uploaded file after it finishes and then hit the "Make Public" button.

Now scroll down and click the Object URL to open up the website! If all went well then you should see a simple list like the following:

Simple, but that list of users came from our Refinery.io app! If you go back to the Refinery and click on the Deployment tab and you should see a few block executions from loading the site.

Summary

In this article, we expanded on our Intro to Refinery.io by adding a Vue.js and Axios website in an S3 bucket. This simple website just lists out the users returned by the Lambda code.

Tyler Moon

Published 2 months ago

Comments?

Leave us your opinion.