top

Polymer And PWA: Understanding The “Why” — Part 1

In this article series, we will understand-A brief history of the evolution of webThe drawbacks of the current state of web platform?How web components proposes to solve those issues?How Polymer fairs as a web component library and a lightweight frontend framework?The out of the box support for PWA and other performance best practices polymer providesYou can easily get started with progressive web app polymers by understanding all the above concepts clearly.The creation of HTML & JSHTML was created to share documents over the network. It supports three features mainly, i.e. display text, images, and interlink with other HTML documents. Everything was pre-created and servers distributed only static HTML pages. Below is the image of a typical browser from the 1990s.Then they wanted to programmatically control HTML and add behaviors to HTML and browser. Hence Javascript was created.Evolution of browsersWeb servers started to serve dynamic content unlike the static contents before. This lead to HTML spec evolution. Browsers started sending data to servers via forms and then AJAX. Browsers got more powerful as Javascript spec progressed. We got to a stage called WEB 2.0 where we started doing complex business logic processing at frontend. Patterns for development emerged and grew into libraries and frameworks. This has emerged polymer as an important library for building a progressive web app from scratch.Framework WarsThere were a lot of competing frameworks to enable the complex frontend apps. Each had their own set of philosophies and build tools. This was essentially the web performance race with every new framework/version improving upon its predecessors. But, creating progressive web apps with polymer supports modern enhanced web platform.Where is the web platform today?We are cluttered and fragmented with frameworks. Each one has a twisted philosophy of performance and has laborious (automated yes, but try tweaking them) build process. All of this is a workaround on how the platform is today.What did we lose?Interoperability: We can’t use components built in different frameworks together with ease. Imagine if you are a big organization and your departments would have a lot of similar looking UI with slight modifications. Now, each department would choose their own framework to build the UI. As an organization, we can’t leverage the work of other teams.Simplicity: We are all aware of the term javascript fatigue. There is so much churn in the frontend world each day that we have to make ourselves familiar with so many things. Each framework enforces its own abstractions of concepts and architecture that your skills are not transferable. You need to be a seasoned engineer to switch between frameworks and write near-perfect code. Others would have a steep learning curve and might take time picking up best practices.Things we didn’t anticipateWhen the frameworks came out they were mainly run on desktops and laptops. No one thought about the mobile web. Most frameworks are too heavy to run on mobile. The parse, compile, execute and render would put a huge load on the mobile CPU. But the computational power on mobile is limited. They don’t have big heatsinks like desktops. Without a heatsink, there would be an upper limit on the processing power of a mobile CPU.Mutation of HTML                                                                       This is a screenshot of Youtube webpage HTML codeIn the Image above we can see how a typical HTML looks like for any website today. I call that built with <div> soup.                                                                                                          Div SoupIt is common to see code like <div class=”tree-control”> where the behavior of tree control is forced on to a scaffolding HTML element div.                                                                                                   Forced BehaviorHTML moved away from original purpose and capabilities. HTML was not meant for Web Apps. All it was supposed to do was have the ability to display documents over the network and link to other documents (https://www.w3.org/History/1989/proposal.html). So the frameworks that exist today are a workaround on the way the platform evolved and trying to do things which were not supported by the original vision.Time to redesign the HTML/Web                                                                 This is a screenshot of YouTube written with web componentsWhat if we create a element <tree-control> instead of writing <div class=”tree-control”>. That would be an easy and natural to understand. It puts the information where it belongs and preserves the semantics.But <tree-control> is not a default HTML element. How would browser parse it? Well, web components are the answer to that question.Web ComponentsWeb components are based on four main specifications that introduces you to progressive web app polymers.Custom ElementsThe Custom Elements specification lays the foundation for designing and using new types of DOM elements.Shadow DOMThe shadow DOM specification defines how to use encapsulated style and markup in web components.HTML importsThe HTML imports specification defines the inclusion and reuse of HTML documents in other HTML documents.HTML TemplateThe HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.( Intro on web components borrowed from https://www.webcomponents.org/introduction )In simple terms, web component allows you to define your own HTML tags, enables you to define blocks of markup with the ability to inject dynamic content, gives you the ability to scope/encapsulate markup and styles in a separate DOM tree and provides a way to include and reuse HTML documents in other HTML documents.                                                        You might say, hey!! popular frameworks already do something like that!You might say, hey!! popular frameworks already do something like that! So let me take a look at the diagram below to understand the differenceYour typical frameworks operate at the Javascript level, which means when you insert your template into the page it parses the HTML, identifies if a definition for <tree-control> is present. if so it takes control of it and handles its lifecycle and its DOM activities. All of this is not native. So there is only so much performance optimization it can give us.Whereas when you use web components we tell the browser what to do when it encounters a <tree-control> tag. We describe its life cycle to the browser. The browser is informed of the DOM manipulations. So what happens here is that browser is in control. It runs on a native layer which means that it will be faster than what frameworks do. This gives your web pages a default win.Hope this Progressive web app polymers tutorial helped you to understand the basics of Polymer and PWA.In the next part of the article, we shall explore Polymer, a javascript library that helps you create custom reusable HTML web components and all benefits that come with it.
Rated 4.0/5 based on 31 customer reviews
  1. Home
  2. Magazine
  3. Polymer And PWA: Understanding The “Why” — Part 1
Normal Mode Dark Mode

Polymer And PWA: Understanding The “Why” — Part 1

Ashrith Kulai
Blog
20th Apr, 2018
Polymer And PWA: Understanding The “Why” — Part 1

In this article series, we will understand-

  • A brief history of the evolution of web
  • The drawbacks of the current state of web platform?
  • How web components proposes to solve those issues?
  • How Polymer fairs as a web component library and a lightweight frontend framework?
  • The out of the box support for PWA and other performance best practices polymer provides

You can easily get started with progressive web app polymers by understanding all the above concepts clearly.


The creation of HTML & JS

HTML was created to share documents over the network. It supports three features mainly, i.e. display text, images, and interlink with other HTML documents. Everything was pre-created and servers distributed only static HTML pages. Below is the image of a typical browser from the 1990s.


Then they wanted to programmatically control HTML and add behaviors to HTML and browser. Hence Javascript was created.

Evolution of browsers

Web servers started to serve dynamic content unlike the static contents before. This lead to HTML spec evolution. Browsers started sending data to servers via forms and then AJAX. 

Browsers got more powerful as Javascript spec progressed. We got to a stage called WEB 2.0 where we started doing complex business logic processing at frontend. Patterns for development emerged and grew into libraries and frameworks. This has emerged polymer as an important library for building a progressive web app from scratch.


Framework Wars

There were a lot of competing frameworks to enable the complex frontend apps. Each had their own set of philosophies and build tools. This was essentially the web performance race with every new framework/version improving upon its predecessors. But, creating progressive web apps with polymer supports modern enhanced web platform.


Where is the web platform today?

We are cluttered and fragmented with frameworks. Each one has a twisted philosophy of performance and has laborious (automated yes, but try tweaking them) build process. All of this is a workaround on how the platform is today.

What did we lose?

Interoperability: We can’t use components built in different frameworks together with ease. Imagine if you are a big organization and your departments would have a lot of similar looking UI with slight modifications. Now, each department would choose their own framework to build the UI. As an organization, we can’t leverage the work of other teams.

Simplicity: We are all aware of the term javascript fatigue. There is so much churn in the frontend world each day that we have to make ourselves familiar with so many things. Each framework enforces its own abstractions of concepts and architecture that your skills are not transferable. You need to be a seasoned engineer to switch between frameworks and write near-perfect code. Others would have a steep learning curve and might take time picking up best practices.


Things we didn’t anticipate

When the frameworks came out they were mainly run on desktops and laptops. No one thought about the mobile web. Most frameworks are too heavy to run on mobile. The parse, compile, execute and render would put a huge load on the mobile CPU. But the computational power on mobile is limited. They don’t have big heatsinks like desktops. Without a heatsink, there would be an upper limit on the processing power of a mobile CPU.


Mutation of HTML

                                                                       This is a screenshot of Youtube webpage HTML code

In the Image above we can see how a typical HTML looks like for any website today. I call that built with <div> soup.

                                                                                                          Div Soup

It is common to see code like <div class=”tree-control”> where the behavior of tree control is forced on to a scaffolding HTML element div.

                                                                                                   Forced Behavior

HTML moved away from original purpose and capabilities. HTML was not meant for Web Apps. All it was supposed to do was have the ability to display documents over the network and link to other documents (https://www.w3.org/History/1989/proposal.html). So the frameworks that exist today are a workaround on the way the platform evolved and trying to do things which were not supported by the original vision.

Time to redesign the HTML/Web

                                                                 This is a screenshot of YouTube written with web components

What if we create a element <tree-control> instead of writing <div class=”tree-control”>. That would be an easy and natural to understand. It puts the information where it belongs and preserves the semantics.


But <tree-control> is not a default HTML element. How would browser parse it? Well, web components are the answer to that question.


Web Components

Web components are based on four main specifications that introduces you to progressive web app polymers.

Custom Elements

The Custom Elements specification lays the foundation for designing and using new types of DOM elements.

Shadow DOM

The shadow DOM specification defines how to use encapsulated style and markup in web components.

HTML imports

The HTML imports specification defines the inclusion and reuse of HTML documents in other HTML documents.

HTML Template

The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

( Intro on web components borrowed from https://www.webcomponents.org/introduction )

In simple terms, web component allows you to define your own HTML tags, enables you to define blocks of markup with the ability to inject dynamic content, gives you the ability to scope/encapsulate markup and styles in a separate DOM tree and provides a way to include and reuse HTML documents in other HTML documents.

                                                        You might say, hey!! popular frameworks already do something like that!

You might say, hey!! popular frameworks already do something like that! So let me take a look at the diagram below to understand the difference


Your typical frameworks operate at the Javascript level, which means when you insert your template into the page it parses the HTML, identifies if a definition for <tree-control> is present. if so it takes control of it and handles its lifecycle and its DOM activities. All of this is not native. So there is only so much performance optimization it can give us.

Whereas when you use web components we tell the browser what to do when it encounters a <tree-control> tag. We describe its life cycle to the browser. The browser is informed of the DOM manipulations. So what happens here is that browser is in control. It runs on a native layer which means that it will be faster than what frameworks do. This gives your web pages a default win.
Hope this Progressive web app polymers tutorial helped you to understand the basics of Polymer and PWA.

In the next part of the article, we shall explore Polymer, a javascript library that helps you create custom reusable HTML web components and all benefits that come with it.

Ashrith

Ashrith Kulai

Blog Author

Frontend Engineer working on Web Components, Polymer, VueJS and node.js. All views personal.

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

TRENDING BLOG POSTS

A Step by Step Guide To Deploy React Component As An NPM Library

IntroductionSince the advent of Node.js in 2009, everything we knew about JavaScript changed. The seemingly dying language made a phoenix-like comeback, growing to become the most popular language in the world.JavaScript was earlier seen as a web-browser’s language, but Node.js came and made it server-side. In essence, Node.js allows developers to develop web-servers with JavaScript. Thus, JavaScript was not only used in browsers, but also in the development of web servers.In January 2010, NPM was introduced to the Node.js environment. It makes Node.js easier for developers to publish and share the source code of JavaScript libraries. The developers can then use the code by installing the library and importing it into their code.NPM has since been the de-facto software registry for JavaScript and Node.js libraries. Many frameworks have emerged using NPM to distribute their library. React, Vue, Angular, and many other apps are developed using NPM. You either install their boilerplates or install their official CLI tool. All this happens through NPM, and of course, Node.js must be installed.Right now, there are billions of libraries in NPM. Angular, React and its cousins are all imported from NPM, and modules dependent on these frameworks are also hosted in NPM. Normally, it is quite easier to write and host a JS library in NPM because it is not dependent on any other framework. The challenge here is how do we write and publish a module dependent on a JS framework to be used as an NPM library.That’s what we are going to solve here and we will be developing a library for the React.js framework.In this tutorial, we are going to see how to create a React component library and publish it on NPM.As a demo, we are going to build a countdown timer.A countdown timer is used to display the countdown to any event. Like, in wedding anniversary, countdown timers can be used to cut the cake. You know the popular: “10! 9! 8! …0!”So, we are going to develop our own countdown timer for the React framework, so that it can be used by other devs in their React apps. They just need to pull in our library, instead of re-inventing the wheel.The source code we are going to build in this article can be found here.Project goalsHere is a list of things we are going to achieve in this article:Configure Babel to transform JSX to JS.Configure Rollup to produce efficient, minified code that works in all browsers(both old and new browsers).Deploy our React component to NPM.AssumptionsI’ll assume you are familiar with these tools and frameworks:Node.js, NPM, Babel, RollupReact.jsGitJavaScript, ES6, and CSSAlso, make sure you have Node.js, IDE (Visual Studio Code, Atom), and Git all installed. NPM comes with Node.js and it doesn’t need a separate installation.Project setupLet’s set up our project directory. I’ll call mine countdown-timer. Inside that, we will create src directory for sources and test directory for unit tests:mkdir countdown-timer cd countdown-timer mkdir srcAfter that, the directory countdown-timer will look like this:+- countdown-timer +- srcNext, we are going to make our directory i.e a Node.js project directory:This command creates a package.json file with the basic information we supplied to NPM. -y flag makes it possible to bypass the process of answering questions when using only the npm init command.package.json is the most important file in a Node.js project. It is used to let NPM know some basic things about our project and, crucially, the external NPM packages it depends on.Install DependenciesWe install libraries that are important to our development process:npm i react -DWe installed the react library as a dev Dependency since we don't want NPM to download it again when the user installs our library. This is because the user would have already installed the react library in his React app.So after the above command, our package.json will look like this:{ "name": "countdown-timer", "version": "1.0.0", "description": "A React library used to countdown time", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/philipszdavido/countdown-timer.git" }, "keywords": [], "author": "Chidume Nnamdi ", "license": "ISC", "bugs": { "url": "https://github.com/philipszdavido/countdown-timer/issues" }, "homepage": "https://github.com/philipszdavido/countdown-timer#readme", "devDependencies": { "react": "^16.3.2" } }Next, we create countdown.js in the src folder:countdown.js will contain our code implementation. We won't go down to explain our code. You can just add anything, maybe a text, "Holla! My First Component". It doesn't matter, all you have to know is the essential configurations needed to deploy and use a React component as a library.To build a React component for NPM, we must first import React and Component from the react library.// src/countdown.js import React, { Component } from 'react'Next, we defined our component, CountDown:// src/countdown.js import React, { Component } from 'react' class CountDown extends Component { }We defined CountDown which extends Component i.e it overrides and inherits all props and methods from the Component class. The reason we imported the Component from react is that it can be used by our module bundler to make React global.Paste this code in our class, CountDown:// src/component.js ... class CountDown extends Component { constructor(props) { super(props) this.count = this.count.bind(this) this.state = { days: 0, minutes: 0, hours: 0, secounds: 0, time_up:"" } this.x = null this.deadline = null } count () { var now = new Date().getTime(); var t = this.deadline - now; var days = Math.floor(t / (1000 * 60 * 60 * 24)); var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((t % (1000 * 60)) / 1000); this.setState({days, minutes, hours, seconds}) if (t < 0) { clearInterval(this.x); this.setState({ days: 0, minutes: 0, hours: 0, seconds: 0, time_up: "TIME IS UP" }) } } componentDidMount() { this.deadline = new Date("apr 29, 2018 21:00:00").getTime(); this.x = setInterval(this.count, 1000); } render() { const { days, seconds, hours, minutes, time_up } = this.state return ( Countdown Clock {days} Days {hours} Hours {minutes} Minutes {seconds} Seconds {time_up} ) } } export default CountDownStarting at the constructor, we bound the count function to the class instance. We have declared our state object which contains days, minutes, hours, seconds, and time_up properties. They will store the current values when our timer ticks(.i.e. counts down). We defined the this.x variable which will hold a reference to a setInterval function. The this.deadline will store the time or the deadline that our timer will tick down to.We used componentDidMount to start our timer. You know, the constructor first executes, followed by componentDidMount and finally, the render method comes last. That's the reason we delegated initialization to the constructor then started the timer at componentDidMount, render then displays the values: hours, days, minutes, seconds.constructor ==> componentDidMount ==> renderFinally, we have successfully exported our CountDown class. So now our users can import the CountDown component in their React project when they install our library.Now, we are done with our component, next step is to bundle our component using Rollup.Install Rollup and create a configuration fileRollup is a module bundler that takes all our JS files in our project and bundles them up into one JS file.First, we install the rollup library:NB: You can use -D or --save-dev flag. -D is shortcut notation for --save-dev.This downloads the rollup library from npm registry into node_modules folder and registers it in the devDependencies section in our package.json.... "devDependencies": { "react": "^16.3.2", "rollup": "^0.58.2" } ...To let rollup know how to bundle our JS files, we have to create a configuration file, rollup.config.js:We can actually pass our options to rollup using commands. But, to save ourselves from the stress of repeating, we created the js file, rollup.config.js to pass all our options to it. Upon execution, rollup reads the options in it and responds accordingly.So, now we open up the rollup.config.js and add these following code:// rollup.config.js const config = { input: 'src/countdown.js', external: ['react'], output: { format: 'umd', name: 'countdown', globals: { react: "React" } } } export default config Let’s talk about what each of these does:input: This is the bundle's entry point. It reads the file, then through it imports, draws up a list of files to bundle.external: This is the array of modules that should remain external to our bundle.output: This property defines how our output file will look like.output.format: Defines the JS format to use (umd, cjs, es, amd, iife, system).output.name: The name by which other scripts can access our module.output.globals: Defines external dependency that our module relies on.Babel/Rollup configurationRollup made it possible for devs to add their own functionalities to Rollup. These additional functionalities are called plugins. plugins allow you customize Rollup's behavior, by, for example, minifying your code for size or transpiling your code to match old browsers.We will need some plugins to:minify our codeadd ES5 supportadd JSX supportTo minify our code we will use rollup-plugin-uglify . To add ES5 features and JSX support, Babel got us covered.Babel is a project that transpiles ES5, ES6, ES7, and beyond into ES5, which can run on any browser.Let’s talk about the Babel JSX supportJSX is a JS-XML formatting popularised by React.js used to render HTML on browsers. Our component, CountDown in its render method returns HTML-like syntax.// src/countdown.js ... render () { return ( Countdown Clock ... ) } ...It’s called JSX. JSX produces React elements from it. Before, React components are bundled and executed in browser there JSX compositions are transformed to React.createElement() calls. React uses Babel to transform the JSX. Our above code compiles down to:... render () { return ( React.createElement('div',null, React.createElement('div',null, React.createElement('h1',null,'Countdown Clock'), React.createElement('div', props: { id: "clockdiv" }, ... ) ) ) } ...React.createElement returns an object which ReactDOM uses to generate virtual DOM and render it on browser’s DOM.So, before we bundle our component it has to be first transpiled to JS from its JSX. To do that we will need the babel plugin, babel-preset-react. To transpile to ES5 features we will need, rollup-plugin-babel.Install rollup/babel pluginsList of our proposed plugins:rollup-plugin-uglifyrollup-plugin-babelbabel-preset-reactNB: Babel preset is a set of plugins used to support a particular JS features.All babel plugins or presets need the babel-core in order to work. So, we go ahead to install the babel-core module:Next, we install our plugins:npm i rollup-plugin-uglify rollup-plugin-babel babel-preset-react -DAll installed a dev dependency, not needed in production.Create a .babelrcTo use babel plugins, there are two ways to configure it. The first is in package.json:// package.json { babel: { "presets": [ "react" ] } }\Second is in a file, .babelrc.For this project, we are going to use the .babelrc approach. Configuring babel plugins is a way to tell babel which preset should be used in transpiling.We create .babelrc in our project's root directory:Inside, add the following:{ "presets":[ "react" ] }Update rollup.config.jsTo use plugins, it must be specified in the plugins key of the rollup.config.js file.First, we import the plugins:// rollup.config.js import uglify from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' ...Then, we create a plugins array key and call all our imported plugins functions there:// rollup.config.js import uglify from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' ... plugins: [ babel({ exclude: "node_modules/**" }), uglify() ], ...We added exclude key to babel function call to prevent it from transpiling scripts in the node_modules directory.Update package.jsonWe will add a build key in our package.json scripts section. We will use it to run our rollup build process.Open up package.json file and add the following:... "scripts": { "build": "rollup -c -o dist/countdown.min.js", "test": "echo \"Error: no test specified\" && exit 1" }, ... The command "rollup -c -o dist/countdown.min.js" bundles our component to dist folder, with the name countdown.min.js. Here, we overrode the name we gave it in rollup.config.js, so whatever Rollup doesn't get from command it gets from rollup.config.js if it exists.Next, we will point our library entry point to dist/countdown.min.js. The entry point of any NPM library is defined in its package.json main key.... "main": "dist/countdown.min.js", ... Rollup our ComponentNow, we are done setting up our Rollup/Babel and their configurations. Let’s compile our component:This command will run "rollup -c -o dist/countdown.min.js". Like it was given it will create a folder dist/ in our project's root directory and put the bundled file countdown.min.js in it.Deploy to NPMWe are done bundling our library. It is now time to deploy it to NPM registry. But before we do that, we have to ignore some files from publishing alongside our library.Our project directory by now will contain files and folders used to build the library:dist/ src/ node_modules/ .babelrc package.json rollup.config.jsThe dist folder is the folder we want to publish, so we don't want other folders and files to be also included alongside the dist folder. To do that we have to create a file, .npmignore. As the name implies, it tells NPM which folders and files to ignore when publishing our library.So, we create the file:Next, we add the folders/files we want to ignore to it:src/ test/ .npmignore .babelrc rollup.config.jsNotice, there is no node_modules in it. NPM automatically ignores it.Before we publish an NPM library, we must host the project on Git before publishing.Create a new repository in any Version control website of your choice, then run these commands in your terminal:git init && git add. git commit -m 'First release' && git add remote origin YOUR_REPO_GIT_URL_HERE git pull origin master && git push origin masterThese commands initialize an empty repo, stages your files/folders, adds a remote repo to it and uploads your local repo to the remote repo.Now, we run npm publish to push our library to NPM:npm publish + @chidumennamdi/countdown-timer@0.0.1See here!! we have successfully published a React library.If the project name has already been taken in NPM. You can choose another name by changing the name property in package.json.// package.json ... "name": "countdown-timer" ... To consume our library, you can create a new React project, then pull in our library:create-react-app react-lib-test cd react-lib-test npm i countdown-timerThen, we import the component and render it:// src/App.js import React, { Component } from 'react'; import CountDown from 'countdown-timer' class App extends Component { render() { return ( ) } } export default AppConclusionI know this article is fairly complex to understand, that is what it takes to develop apps using modern JS development method.We saw a lot of tools and their uses:Rollup: used to bundle and minify our libraryBabel: used to transform/transpile our library to run on any browser.In the end, we saw how easy it was to extract a React JS component and publish it on NPM. All we did was write the library, bundle it using Rollup with help from Babel, tell Rollup to bundle it as a React dependency, and then run the npm publish command. That's all!!Please, feel free to ask if you have any questions or comments in the comment section.Thanks !!!
Rated 4.5/5 based on 20 customer reviews
A Step by Step Guide To Deploy React Component As An NPM Library

A Step by Step Guide To Deploy React Component As An NPM Library

Blog

Connecting ReactJS Frontend with NodeJs Backend

Uploading files might seem like a task that needs to be conquered especially in web development. In this tutorial, we will see how to upload a simple AJAX based file using Reactjs on front-end and Node.js on the back-end. This is easy to accomplish with the following technologies since the whole source code will be in one language i.e JavaScript. To show you how to combine a Node.js backend with React Js front-end, we will be making the use of a simple file upload example. The topics we will be covering are:Setting up a Back-end of the app using express-generatorUsing create-react-app to scaffold a front-end Reactjs appUsing axios for cross-origin API callsHandling POST requests on our serverUsing express-fileupload, a promise based libraryLastly, connecting a Reactjs and Node.jsGetting StartedWe will be starting without back-end first. We will write a server application with necessary configurations required to accept cross-origin requests and uploading files. First, we need to install express-generator which is the official and quickest way to start with an Express back-end application.npm install -g express-generator We will install this module globally from our terminal. After installing this global npm module, we have an instance of it named express to generate our project structure.mkdir fileupload-example express server cd serverWhen changing the current directory to the project express command just scaffolded, we can observe the following structure and files:To run this backend server on default configuration, we have to install the dependencies mentioned in package.json first.npm install npm startExpress-generator comes with the following dependencies. Some of them are essential to use such as morgan and body-parser and some we can ignore for this project."dependencies": {     "body-parser": "~1.18.2",     "cookie-parser": "~1.4.3",     "debug": "~2.6.9",     "express": "~4.15.5",     "jade": "~1.11.0",     "morgan": "~1.9.0",     "serve-favicon": "~2.4.5"   }I will be adding two more packages for our configurable back-end application to behave in the way we want to.npm install --save cors express-fileupload cors provide a middleware function for Express applications to enable various Cross-Origin Resource Sharing options. CORS is a mechanism that allows restricted resources (in our case, API or AJAX requests) on a web page from another domain. It helps a browser and a server to communicate and can be hosted on separate domains. You will understand it more when you will see it in action.The other module, express-fileupload is a bare minimum express middleware function for uploading files. The advantage of it is that it supports for Promises and can handle multiple file uploads.With these two important packages added as dependencies in our project, we can now start by modifying the default Express back-end in app.js file.const express = require('express'); const path = require('path'); const favicon = require('serve-favicon'); const logger = require('morgan'); const cookieParser = require('cookie-parser'); const bodyParser = require('body-parser'); const cors = require('cors'); // addition we make const fileUpload = require('express-fileupload'); //addition we make const index = require('./routes/index'); const users = require('./routes/users'); const app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); // uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(cookieParser()); // Use CORS and File Upload modules here app.use(cors()); app.use(fileUpload()); app.use('/public', express.static(__dirname + '/public')); app.use('/', index); // catch 404 and forward to error handler app.use(function(req, res, next) { const err = new Error('Not Found'); err.status = 404; next(err); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {}; // render the error page res.status(err.status || 500); res.render('error'); }); module.exports = app;In the above code, you would notice that we made some additions. The first addition we did is to import packages cors and express-fileupload in app.js after other dependencies are loaded.const cors = require('cors'); // addition we make const fileUpload = require('express-fileupload'); //addition we makeThen just after other middleware functions, we will instantiate these two newly imported packages.// Use CORS and File Upload modules here app.use(cors()); app.use(fileUpload());Also, we need to allow data coming from a form. For this, we have to enable urlencoded options of the body-parser module and specify a path in order to store the image file coming from the client.app.use(bodyParser.urlencoded({ extended: true })); // below, also change this to app.use('/public', express.static(__dirname + '/public'));With this, we can see if our server is working correctly by running:npm start If you get the screen below by navigation on port http://localhost:3000, it means that our server is running perfectly.Before we move to generate our front-end application, we need to change to port for our backend. Since front-end application generated using create-react-app will also be running on port 3000. Open bin/www file and edit:/**  * Get port from environment and store in Express.  */ // 3000 by default, we change it to 4000 var port = normalizePort(process.env.PORT || '4000'); app.set('port', port);Setting up Front-endcreate-react-app is another command line utility used to create a default Reactjs front-end application.create-react-app node-react-fileupload-front-end We will also install the required library that we are going to use for making API calls to our backend server.yarn add axios index.js is the starting point of our application in the src/ directory. It registers the render function using ReactDOM.render() by mounting App component. Components are the building blocks in any Reactjs application. This App component comes from src/App.js. We will be editing this file in our front-end source code.File Upload FormWe will be using the HTML form element that has an input. This provides access to the value, that is the file, using refs. Ref which is a special attribute that can be attached to any component in React. It takes a callback function and this callback will be executed immediately after the component is mounted. It can be also be used on an HTML element and the callback function associated will receive the DOM element as the argument. This way, the ref can be used to store a reference for that DOM element. That is exactly what we are going to do.class App extends Component { // We will add this part later render() { return ( FileUpload { this.uploadInput = ref; }} type="file" /> { this.fileName = ref; }} type="text" placeholder="Enter the desired name of file" /> Upload Uploaded Image: ); } }The input element must have the type="file" otherwise it would not be able to recognize what type we are using it for. It is similar to the values like email, password, etc.The handleUploadImage method will take care of the API calls that we need to request to the server. If that call is successful, then the local state of our React application will be set to let the user know that the upload was successful. Inside this function, to make the API call, we will be using the axios library that we installed when setting up our front end app.constructor(props) { super(props); this.state = { imageURL: '' }; this.handleUploadImage = this.handleUploadImage.bind(this); } handleUploadImage(ev) { ev.preventDefault(); const data = new FormData(); data.append('file', this.uploadInput.files[0]); data.append('filename', this.fileName.value); fetch('http://localhost:4000/upload', { method: 'POST', body: data }).then(response => { response.json().then(body => { this.setState({ imageURL: `http://localhost:4000/${body.file}` }); }); }); }The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data but can be used independently from forms in order to transmit keyed data. To build a FormData object, instantiating it then appending fields to it by calling its append() method like we did above.Since we are not using any styling, our form looks bare minimum. But, you can go ahead and make it look more professional. For brevity, I am going to keep things simple. I recommend you to always enter a file name, otherwise, it will store the file with a undefined.jpg name.Updating the server to handle AJAX RequestRight now, we do not have in our server code to handle the POST request React app makes a request to. We will add the route in our app.js in our Express application where the default route is defined.app.post('/upload', (req, res, next) => { // console.log(req); let imageFile = req.files.file; imageFile.mv(`${__dirname}/public/${req.body.filename}.jpg`, err => { if (err) { return res.status(500).send(err); } res.json({ file: `public/${req.body.filename}.jpg` }); console.log(res.json); }); });npm start This route gets triggered when a request is made to /upload/. The callback associated using the route contain req, res objects and access to next. A standard way of defining a middleware function in an Express application. The req object has the file and the filename that was uploaded during form submission from the client application. If any error occurs, we return the 500 server error code. Otherwise, we return the path to the actual file and console the response object to check if everything is working as expected..mv file is promise-based and provided to us by the express-fileupload package we installed earlier. Try uploading an image file from the client now. Make sure both the client and server are running from different terminal tabs at this point. You should get a success message like this in your terminal:POST /upload 200 98.487 ms - 25 GET /public/abc.jpg 200 6.231 ms - 60775At the same time, the client is requesting to view the file on the front-end with a GET HTTP method. That means the route /upload from the browser is successfully called and everything is working fine. Once the file is uploaded to the server, it will be sent back to the client to reflect that the user has successfully uploaded the file.You can find the complete code for this example at FileUpload-Example Github Repository.
Rated 4.0/5 based on 7 customer reviews
Connecting ReactJS Frontend with NodeJs Backend

Connecting ReactJS Frontend with NodeJs Backend

Blog

How to Deploy a Node.js Application to Amazon Web Services Using Docker

Table of Contents1. Introduction2. Prerequisites3. A quick primer on Docker and AWS4. What we’ll be deploying 5. Creating a Dockerfile6. Building a docker image7. Running a docker container8. Creating the Registry (ECR) and uploading the app image to it9. Creating a new task definition10. Creating a cluster11. Creating a service to run it12. Conclusion1. IntroductionWriting code that does stuff is something most developers are familiar with. Sometimes, we need to take the responsibility of a SysAdmin or DevOps engineer and deploy our codebase to production where it will help a business solve problems for customers.In this AWS docker node.js tutorial, I’ll show you how to dockerize a Node.js application and deploy it to Amazon Web Service (AWS) using Amazon ECR (Elastic Container Registry) and ECS (Elastic container service).2. Prerequisites To deploy Node.js applications to AWS using Docker, you’ll need the following:Node and Npm: Follow this link to install the latest versions.Basic knowledge of Node.js.Docker: The installation provides Docker Engine, Docker CLI client, and other cool stuff. Follow the instructions for your operating system. To check if the installation worked, fire this on the terminal:docker --versionThe command above should display the version number. If it doesn’t, it means the installation didn’t complete properly.4. AWS account: Sign up for a free tier. There is a waiting period to verify your phone number and bank card. After this, you will have access to the console.5. AWS CLI: Follow the instructions for your OS. You need Python installed.3. A quick primer on Docker and AWSDocker is an open source software that allows you to pack an application together with the required dependencies and environment in a ‘Container’ that you can ship and run anywhere. It is independent of platforms or hardware, and therefore the containerized application can run in any environment in an isolated fashion.Docker containers solve many issues, such as when an app works on a coworker's computer but doesn’t run on yours, or it works in the local development environment but doesn’t work when you deploy it to a server.                                                       Amazon Web Services (AWS) offers a reliable, scalable, and inexpensive cloud computing service for businesses. As I mentioned before, this tutorial will focus on using the ECR and ECS services.4. What we’ll be deployingLet’s quickly build a sample Node.js app on docker that we’ll use for the purpose of this tutorial. It going to be very simple app.Enter the following in your terminal:// create a new directory mkdir sample-nodejs-app // change to new directory cd sample-nodejs-app // Initialize npm npm init -y // install express npm install express // create an server.js file touch server.jsOpen server.js and paste the code below into it:Start the app with:node server.jsAccess it on http://localhost:3000. You should get Hello world from a Node.js app! displayed in your browser. The complete code is available on GitHub.Now let’s take our very important app to production
Rated 4.0/5 based on 21 customer reviews
How to Deploy a Node.js Application to Amazon Web Services Using Docker

How to Deploy a Node.js Application to Amazon Web Services Using Docker

Blog

Follow Us On

Share on