Get going with Node.js, npm and Vue.js 2 on Red Hat & Oracle Linux image 49

Get going with Node.js, npm and Vue.js 2 on Red Hat & Oracle Linux

A quick and rough guide on getting going with Node, npm and Vue.js 2 on a Enterprise Linux platform (Oracle Linux based on RedHat Linux)

Install Node.JS on a Oracle Enterprise Linux system:

 

as root:

curl –silent –location https://rpm.nodesource.com/setup_8.x | bash –

and:

yum -y install nodejs

(in order to disable the inaccessible proxy server that was setup for my yum environment I have to remove the line in /etc/yum.conf with proxy server)

(see instruction at: https://nodejs.org/en/download/package-manager/)

image

 

For Vue.js

See: https://vuejs.org/v2/guide/installation.html

still as root:

npm install vue

npm install --global vue-cli

 

Now again as the [normal] development user:

create and run your first Vue.js application

A single HTML document that loads Vue.js library and contains Vue.js “application” – and that can be opened like that in a local browser (no web server required)

vue init simple my-first-app

image

image

image

image

 

# create a new project using the “webpack” template

vue init webpack my-second-app

image

 

# install dependencies and go!

cd my-second-app

npm install

npm run dev

image

Open the generated Vue.js application in the local browser – or in a remote one:

image

 

Optional – though recommended – is the installation of a nice code editor. One that is to my liking is Microsoft Visual Studio Code – free, light weight, available on all platforms. See for installation instructions: https://code.visualstudio.com/docs/setup/linux

To turn the application – simplistic as it is – into a shippable, deployable application, we can use the build feature of webpack:

npm run build

image

The built resources are in the /dist folder of the project. These resources can be shipped and placed on any web server, such as nginx, Apache, Node.js and even WebLogic (co-located with Java EE web application).

The build process can be configured through the file /build/webpack.prod.conf.js, for example to have the name of the application included in the name of the generated resources:

 

image

One Response

  1. Christopher Jones March 20, 2018