In this section, we will be building a Node.js application that renders the YouTube search component. We will be leveraging Lightning Out and some open source npm libraries, such as forcejs (https://github.com/ccoenraets/forcejs) and webpack, to build this application. The application will be hosted on the Heroku platform.

The following are the steps to build a working Node.js application:

1. Assuming we have Node.js and npm installed, let's initialize a Node.js app using the following command, in the same directory where we created a Heroku application, and accept the default prompts. This will create a package.json file in your current project folder:

npm init

2. We will be using a forcejs library from the https://github.com/ccoenraets/forcejs repository, which helps to achieve OAuth. To install this as a dependency, run the following command:

npm install forcejs --save-dev

3. There is a lightweight development server that can be optionally installed if you want to use the local dev server for development. Note that you will need to implement SSL and make it HTTPS if you are using this for Lightning Out. To install the dev dependency, use the following command: 

npm install force-server --save-dev

4. Babel transpiles all the ES6 into its ES5 equivalent using the transpiler and webpack. The following code installs webpack, babel-loader, babel-core, and other dependencies needed to transpile ES6 to ES5 code:

npm install babel-core babel-loader babel-preset-es2015 webpack --save-dev

5. The package.json file will add scripts to start the webpack build and local server. The complete package.json should resemble the following code snippet. Edit package.json using the editor to use the following code: 

{
  "name": "ltngoutapp",
  "version": "1.0.0",
  "description": "A sample node app for Lightning Out demonstration",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "force-server": "0.0.8",
    "forcejs": "^2.2.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^2.1.4"
  },
  "scripts": {
    "webpack": "webpack",
    "start": "force-server"
  },
  "engines": {
    "node": "9.5.0",
    "npm": "5.6.0"
  }
}

6. Create a webpack config file (webpack.config.js) that takes the entry from the app.js file and creates a bundle named app.bundle.js. The webpack config file code is as follows:

var path = require('path');
var webpack = require('webpack');

const config = {
    mode: 'development',
    entry: './app.js',
    output: {
        path: path.join(__dirname, '/app.bundle.js'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
};
module.exports = config; 

Note it uses the babel-loader to transpile the ES6 code to ES5, which all browsers can support.