{"id":2092,"date":"2016-06-30T16:48:20","date_gmt":"2016-06-30T07:48:20","guid":{"rendered":"http:\/\/avinton.com\/?page_id=2092"},"modified":"2021-11-09T16:33:39","modified_gmt":"2021-11-09T07:33:39","slug":"demo-api","status":"publish","type":"page","link":"https:\/\/avinton.com\/en\/academy\/demo-api\/","title":{"rendered":"Front End Technologies: Demo API"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]<img decoding=\"async\" class=\"alignnone size-full wp-image-2116\" src=\"http:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg\" alt=\"download\" width=\"785\" height=\"391\" srcset=\"https:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg 785w, https:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download-335x167.jpeg 335w, https:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download-300x149.jpeg 300w, https:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download-768x384.jpeg 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This tutorial will teach you how to build your first, basic API and how to connect it with your Front End.<\/p>\n<p>Tools and technologies we will use for this task include:<\/p>\n<ul>\n<li>Package Manager (NPM)<\/li>\n<li>Web Framework for Node (Express)<\/li>\n<li>NextGen JS syntax (ECMAScript6)<\/li>\n<\/ul>\n<h2>Step #1: Set up your project<\/h2>\n<p>Make sure you are in your home directory:<\/p>\n<pre class=\"\">cd ~<\/pre>\n<p>Create a new directory for this exercise:<\/p>\n<pre class=\"\">mkdir api-demo\r\ncd api-demo<\/pre>\n<p>Create a JS file called <strong>api.js<\/strong> with the following contents:<\/p>\n<pre class=\"\">'use strict';\r\n\r\nconst express = require('express');\r\nconst app     = express();\r\n\r\n\/\/ Enable CORS\r\napp.use((req, res, next) =&gt; {\r\n  res.header(\"Access-Control-Allow-Origin\", \"*\");\r\n  res.header(\"Access-Control-Allow-Headers\", \"Origin, X-Requested-With, Content-Type, Accept\");\r\n  next();\r\n});\r\n\r\n\/\/ Show homepage\r\napp.get('\/', (req, res, next) =&gt; {\r\n  res.send('Hello World.');\r\n});\r\n\r\n\/\/ Show our results\r\napp.get('\/fruits', (req, res, next) =&gt; {\r\n  let list = {\r\n    apples: 1,\r\n    bananas: 5,\r\n    oranges: 10\r\n  }\r\n  res.json(list);\r\n});\r\n\r\n\/\/ Catch 404 and forward to error handler\r\napp.use((req, res, next) =&gt; {\r\n  res.status(404);\r\n  res.type('txt').send('Error 404 - Not Found');\r\n  next(new Error('Not Found'));\r\n});\r\n\r\n\/\/ Start the app\r\napp.listen(8081, () =&gt; {\r\n  console.log('Listening on port 8081');\r\n});<\/pre>\n<p>Notice how this code introduces new ES6 syntax elements, such as <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\">arrow functions<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\">const<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\">let<\/a>.<\/p>\n<p>Create a config file for NPM called <strong>package.json<\/strong> with the following contents:<\/p>\n<pre class=\"\">{\r\n  \"name\": \"api-demo\",\r\n  \"version\": \"0.0.1\",\r\n  \"private\": true,\r\n  \"scripts\": {\r\n    \"start\": \"NODE_ENV=development PORT=8081 nodemon .\/api.js\"\r\n  }\r\n}<\/pre>\n<h2>Step #2: Install Express &amp; Nodemon utility<\/h2>\n<p>Install Express (Node web framework) and Nodemon utility that automatically restarts server on changes:<\/p>\n<pre class=\"\">npm install express nodemon --save-dev<\/pre>\n<h2>Step #3: First run<\/h2>\n<p>Run the following command from the command line to start your dev server:<\/p>\n<pre class=\"\">npm start<\/pre>\n<p>Open your browser at http:\/\/127.0.0.1:8081. It should be displaying <strong>&#8220;Hello World&#8221;<\/strong><br \/>\nOpen http:\/\/127.0.0.1:8081\/fruits. It should be displaying a list of results.<br \/>\nOpen http:\/\/127.0.0.1:8081\/abc. It should be displaying <strong>&#8220;Error 404 &#8211; Not Found&#8221;<\/strong> as this page doesn&#8217;t exist.<\/p>\n<p>Congratulations! You&#8217;ve just set up your first API.<\/p>\n<h2>Step #4: Connect API with Front End<\/h2>\n<p>Keep your API server running and open your Front End Demo project from the previous tutorial.<\/p>\n<p>While you are in your Front End Demo project directory install <strong>jQuery<\/strong> in it:<\/p>\n<pre class=\"\">npm install jquery --save-dev<\/pre>\n<p>Try editing your <strong>webpack.config.js<\/strong> file. Add <strong>plugins<\/strong> block:<\/p>\n<pre class=\"\">  plugins: [\r\n    new webpack.ProvidePlugin({\r\n      $: \"jquery\",\r\n      jQuery: \"jquery\"\r\n    })\r\n  ]<\/pre>\n<p>the full file should now be looking like this:<\/p>\n<pre class=\"\">'use strict';\r\n\r\nvar webpack = require('webpack');\r\n\r\nmodule.exports = {\r\n  entry: \".\/entry.js\",\r\n  output: {\r\n    path: __dirname,\r\n    filename: \"bundle.js\"\r\n  },\r\n  devServer: {\r\n    contentBase: '.\/',\r\n    hot: true,\r\n    inline: true,\r\n    progress: true,\r\n    stats: 'errors-only'\r\n  },\r\n  module: {\r\n    loaders: [\r\n      {\r\n        test: \/\\.(scss|sass)$\/,\r\n        loaders: [\"style\", \"css\", \"sass\"]\r\n      }\r\n    ]\r\n  },\r\n  plugins: [\r\n    new webpack.ProvidePlugin({\r\n      $: \"jquery\",\r\n      jQuery: \"jquery\"\r\n    })\r\n  ]\r\n};<\/pre>\n<p>&#8230;and save the file.<\/p>\n<p>Edit your <strong>entry.js<\/strong> file. File contents should now be looking as follows:<\/p>\n<pre class=\"lang:default decode:true \">require(\".\/style.sass\");\r\n\r\n$.get(\"http:\/\/127.0.0.1:8081\/fruits\", function(data) {\r\n  var list = '';\r\n\r\n  $.each(data, function(key, value) {\r\n    list += `\r\n&lt;ul&gt;\r\n \t&lt;li&gt;${key} : ${value}&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n`;\r\n  });\r\n\r\n  $(\"body\").html(`\r\n&lt;ul&gt;${list}&lt;\/ul&gt;\r\n`);\r\n});<\/pre>\n<p>Save and run the Client App server:<\/p>\n<pre class=\"\">npm start<\/pre>\n<p>You should have both API and Client App servers running at this point.<\/p>\n<p>Go directly to your browser. Open your browser at http:\/\/127.0.0.1:8080. It should be displaying:<\/p>\n<ul>\n<li>apples : 1<\/li>\n<li>bananas : 5<\/li>\n<li>oranges : 10<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>You just learned how to create your first API and how to connect it to your Front End App.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] &nbsp; This tutorial will teach you how to build your first, basic API and how to connect it with your Front End. Tools and technologies we will use for this task include: Package Manager (NPM) Web Framework for Node (Express) NextGen JS syntax (ECMAScript6) Step #1: Set up your project Make sure you are<br \/><a href=\"https:\/\/avinton.com\/en\/academy\/demo-api\/\" class=\"more\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":1906,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-2092","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Front End Technologies: Demo API - Avinton Japan<\/title>\n<meta name=\"description\" content=\"&nbsp; This tutorial will teach you how to build your first, basic API and how to connect it with your Front End. Tools and technologies we will use for\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avinton.com\/en\/academy\/demo-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Front End Technologies: Demo API - Avinton Japan\" \/>\n<meta property=\"og:description\" content=\"&nbsp; This tutorial will teach you how to build your first, basic API and how to connect it with your Front End. Tools and technologies we will use for\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avinton.com\/en\/academy\/demo-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Avinton Japan\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Avintons\/\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-09T07:33:39+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@AvintonJapan\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/avinton.com\/en\/academy\/demo-api\/\",\"url\":\"https:\/\/avinton.com\/en\/academy\/demo-api\/\",\"name\":\"Front End Technologies: Demo API - Avinton Japan\",\"isPartOf\":{\"@id\":\"https:\/\/avinton.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/avinton.com\/en\/academy\/demo-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/avinton.com\/en\/academy\/demo-api\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg\",\"datePublished\":\"2016-06-30T07:48:20+00:00\",\"dateModified\":\"2021-11-09T07:33:39+00:00\",\"description\":\"&nbsp; This tutorial will teach you how to build your first, basic API and how to connect it with your Front End. Tools and technologies we will use for\",\"breadcrumb\":{\"@id\":\"https:\/\/avinton.com\/en\/academy\/demo-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/avinton.com\/en\/academy\/demo-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/avinton.com\/en\/academy\/demo-api\/#primaryimage\",\"url\":\"http:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg\",\"contentUrl\":\"http:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/avinton.com\/en\/academy\/demo-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/avinton.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Avinton Academy\",\"item\":\"https:\/\/avinton.com\/en\/academy\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Front End Technologies: Demo API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/avinton.com\/en\/#website\",\"url\":\"https:\/\/avinton.com\/en\/\",\"name\":\"Avinton Japan\",\"description\":\"Tailored Solutions and Consulting in AI and Big Data\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/avinton.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Front End Technologies: Demo API - Avinton Japan","description":"&nbsp; This tutorial will teach you how to build your first, basic API and how to connect it with your Front End. Tools and technologies we will use for","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avinton.com\/en\/academy\/demo-api\/","og_locale":"en_US","og_type":"article","og_title":"Front End Technologies: Demo API - Avinton Japan","og_description":"&nbsp; This tutorial will teach you how to build your first, basic API and how to connect it with your Front End. Tools and technologies we will use for","og_url":"https:\/\/avinton.com\/en\/academy\/demo-api\/","og_site_name":"Avinton Japan","article_publisher":"https:\/\/www.facebook.com\/Avintons\/","article_modified_time":"2021-11-09T07:33:39+00:00","og_image":[{"url":"http:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@AvintonJapan","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avinton.com\/en\/academy\/demo-api\/","url":"https:\/\/avinton.com\/en\/academy\/demo-api\/","name":"Front End Technologies: Demo API - Avinton Japan","isPartOf":{"@id":"https:\/\/avinton.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/avinton.com\/en\/academy\/demo-api\/#primaryimage"},"image":{"@id":"https:\/\/avinton.com\/en\/academy\/demo-api\/#primaryimage"},"thumbnailUrl":"http:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg","datePublished":"2016-06-30T07:48:20+00:00","dateModified":"2021-11-09T07:33:39+00:00","description":"&nbsp; This tutorial will teach you how to build your first, basic API and how to connect it with your Front End. Tools and technologies we will use for","breadcrumb":{"@id":"https:\/\/avinton.com\/en\/academy\/demo-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avinton.com\/en\/academy\/demo-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avinton.com\/en\/academy\/demo-api\/#primaryimage","url":"http:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg","contentUrl":"http:\/\/avinton.com\/wp-content\/uploads\/2016\/06\/download.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/avinton.com\/en\/academy\/demo-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avinton.com\/en\/"},{"@type":"ListItem","position":2,"name":"Avinton Academy","item":"https:\/\/avinton.com\/en\/academy\/"},{"@type":"ListItem","position":3,"name":"Front End Technologies: Demo API"}]},{"@type":"WebSite","@id":"https:\/\/avinton.com\/en\/#website","url":"https:\/\/avinton.com\/en\/","name":"Avinton Japan","description":"Tailored Solutions and Consulting in AI and Big Data","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avinton.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages\/2092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/comments?post=2092"}],"version-history":[{"count":16,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages\/2092\/revisions"}],"predecessor-version":[{"id":60579,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages\/2092\/revisions\/60579"}],"up":[{"embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/pages\/1906"}],"wp:attachment":[{"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/media?parent=2092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/categories?post=2092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avinton.com\/en\/wp-json\/wp\/v2\/tags?post=2092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}