Installing Nodejs and NPM on MS Windows 10

What is NodeJS?

Its what is known as a runtime environment, where programmes written in JavaScript can run.

What is Python?

Python in a programming language. 

What is NPM?

Its a node package manager, which is an application and repository for developing and sharing JavaScript code. Many developers write applications and allow the NPM access to their programmes.

What is Chocolatey?

Its a package manager for windows that runs in Windows PowerShell. Which means, when installing a programme, and there are other dependencies, it will go search and download for you.

How to install Nodejs and NPM?

Download the executable for your version of Windows, at https://nodejs.org/en/download/ 

Example, download and Save the Windows Installaer (.msi) for 64-bit.

Run the installer. Make sure to CHECK box to Automatically install the necessary tools. This will add to path the Node.js and npm programmes.

At end of installation, a Windows prompt will appear. This runs several scripts, press "Space" and follow the instructions which will lead you to the Windows PowerShell prompt.

Test installation

Open a command prompt and type the following;

npm -version

node -v

My output was

8.1.0

v16.13.0

Run Hello World

Lets use an available helloworld package. At the windows terminal;

npm init hello-world helloworld

cd helloworld

npm run start

Use a web browser with the URL that is displayed at the terminal to see the results. In my case, the URL is http://localhost:3000

Issues

The Windows PowerShell waits for a long time with the last message, and task manager show lots of memory+disk activity+Ethernet. 

Created a UnelevatedInstallerTelemetryDecorator

Could it be a slow PC with slow network connectivity? If there are no errors in windows logs, just wait until its done processing and the text appears. My PC took almost 30 mins.

Press Enter to exit.

Building Vue Single Page Application (part 2)

 Creating a Vue component. 

This is a continuation of Tutorial from Part 1.

Part 1:

• This will build a Vue project with a component called Helloworld.
• Identify basic folder and files
• Know how to instantiate a Vue application
• Know the basic flow
• Know a basic Vue shorthand
• Be able to create string variable
• Be able to create custom function

Part 2:

• Know what is a component
• Be able to create a new component
• Be able to create an array variable
• Know how to display variables in a table format
• Know what is Bootstrap
• Be able to add Bootstrap
• Be able to create a Bootstrap navbar, navbar-brand, navbar-nav and form within navbar

1. Add and test a new component named Products

Create the file src/components/Products.vue and add the contents

<template>
  <div class="products">
      <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'Products',

  props: {
    msg: String
  }
}
</script>

Update the App.vue template with data and methods to be used in the component.

Replace <HelloWorld msg="

with 

<Products msg="

Replace import HelloWorld from './components/HelloWorld.vue'

with 

import Products from './components/Products.vue'

Apply changes and run

Add data and for loop

Edit <SCRIPT> content in src/components/Products.vue

export default {
  name: 'Products',
  props: {
    msg: String,
    products: Array,
  }
}

Edit <TEMPLATE> content in src/components/Products.vue

  <div class="products">

      <h1>{{ msg }}</h1>

      <table border=1>

      <thead>

        <tr>

          <th>Name</th>

          <th>Description</th>

          <th>Cost</th>

        </tr>

      </thead>

      <tbody>

        <tr v-for="product in products" :key="product.id">

          <td>{{ product.name }}</td>

          <td>{{ product.description }}</td>

          <td>{{ product.cost }}</td>

        </tr>

        </tbody>

    </table>

  </div>

Edit conponents data in src/App.vue

  data(){
    return {
      message: 'My Products',

      products: [
        {
          id: 1,
          name: "Leather shield",
          description: "Tough leather",
          cost: 120 },
        { id:2,
          name: "Heavy Leather shield",
          description: "Double leather layers",
          cost: 150 },
        ],
    }

Compile and run

2. Add Bootstrap support

Current Vue 3, will cause Bootstrap 5 to be installed.

npm install --save @popperjs/core bootstrap

Edit the file src/main.js to import the installed bootstrap.

import "bootstrap";

import "bootstrap/dist/css/bootstrap.min.css";

3. Create a navigation bar component

Lets use the example code from bootstrap. Create a new file src/components/Navigation.vue

Then add the following code

<template>

<div class="row">

<div class="NavbarPage hold-transition sidebar-mini layout-fixed">

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <div class="container-fluid">

            <a class="navbar-brand" href="#">Navbar</a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">

                <a class="nav-link active" aria-current="page" href="#">Home</a>

                </li>

                <li class="nav-item">

                <a class="nav-link" href="#">Link</a>

                </li>

                <li class="nav-item dropdown">

                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                    Dropdown

                </a>

                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

                    <li><a class="dropdown-item" href="#">Action</a></li>

                    <li><a class="dropdown-item" href="#">Another action</a></li>

                    <li><hr class="dropdown-divider"></li>

                    <li><a class="dropdown-item" href="#">Something else here</a></li>

                </ul>

                </li>

                <li class="nav-item">

                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>

                </li>

            </ul>

            <form class="d-flex">

                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

                <button class="btn btn-outline-success" type="submit">Search</button>

            </form>

            </div>

        </div>

        </nav>

</div>

</div>

</template>

<script>

</script>

Next, edit src/App.vue can replave the DIV with ID=app to the following

<div id="app" class="container-fluid">  

  <NavbarRow />

Within the tag <script>, add this new component

import NavbarRow from './components/Navigation.vue'

Add this to the components list

components: {

     Products, NavbarRow,

  },

Compile and run.

Exercise:

1. Create a new component called Footer.vue and like its name, setup within App.vue to display your name and email as the page footer.

2. Describe how each of the modules are loaded through a drawing. 

3. Edit the menu item "Link" in the navigation bar to load a website of your preference.

Building Vue Single Page Application (part 1)

Following is an introduction tutorial to building a Vue application. It works on MS Windows 10 and Centos Linux 7/8.

Part 1:

• This will build a Vue project with a component called Helloworld.
• Identify basic folder and files
• Know how to instantiate a Vue application
• Know the basic flow
• Know a basic Vue shorthand
• Be able to create string variable
• Be able to create custom function

Part 2:

• Know what is a component
• Be able to create a new component
• Be able to create an array variable
• Know how to display variables in a table format
• Know what is Bootstrap
• Be able to add Bootstrap
• Be able to create a Bootstrap navbar, navbar-brand, navbar-nav and form within navbar

Pre-requisite: 

Nodejs version 12.x

NPM version 6.14.x

Most of the commands will  be at the command line, 

Install VUE

npm install -g @vue/cli

vue --version
@vue/cli 4.5.15

vue create helloworld

Select Vue 3, using arrow keys.

Run server for VUE

cd helloworld

npm run serve

Test the new site by opening a web browser and pointing to URL http://localhost:8080/

Press Ctrl-c to stop the server

Parts of Vue

Following are basic files and folders of interest;

src/main.js : root Vue instance is declared and configured.

src/App.vue : contains root Vue components. Notice the page title is defined here in the value "msg".

public/index.html : Rendering page of target "app" or should Vue instance fail.

src/components/HelloWorld.vue : Codes for the initial page that root Vue has declared.

This concludes creating a default Vue project. In each of the exercise below, view the results with

npm run serve

Exercise:

1. Update variable msg string

Replace the page welcome message with your own in the file src/App.vue

2. Update string using component data

In Vue, there are short hand notations. One of this is ":msg" which is shorthand for our variable msg in "v-bind:msg".

In the file src/App.vue edit the components

  components: {
    HelloWorld
  },
  data(){
    return {
      message: 'This is my custom title!'
    }
  }

Replace HelloWorld place holder with

<HelloWorld :msg="message"/>

3. User input to display variable in popup window

Edit file src/App.vue, add after the line <HelloWorld .....

<input type="text" v-model="message" />
<button @click="alertMessage">Ok</button>

Add another component methods, for the function alertMessage to be called

  data(){
    return {
      message: 'Hello World!'
    }
  },

  methods: {
    alertMessage(){
      alert(this.message)
    }
  }