Nodejs (Application)

From campisano.org
Jump to navigation Jump to search

nodejs

Install

# shared/opt install schema v1.5.6

#### as common user ####
# define applications vars
export SOFTWARE_PATH="/home/shared/opt/software"
export NAME="nodejs"
export VERSION="v18.13.0"
export URL="https://nodejs.org/dist/${VERSION}/node-${VERSION}-linux-x64.tar.xz"
su - -w SOFTWARE_PATH,NAME,VERSION

#### as root ####
# install packages and prepare destination path
apt-get -q -y install wget coreutils findutils < /dev/null
apt-get -q -y install tar xz-utils < /dev/null
mkdir -m 777 "${SOFTWARE_PATH}/tmp_install/" "${SOFTWARE_PATH}/${NAME}_${VERSION}/"
exit

#### as common user ####
umask 0027
cd "${SOFTWARE_PATH}/tmp_install"
wget -c --no-check-certificate "${URL}"
tar -xJf "node-${VERSION}-linux-x64.tar.xz"
mv "node-${VERSION}-linux-x64/"* "${SOFTWARE_PATH}/${NAME}_${VERSION}"
cd
su - -w SOFTWARE_PATH,NAME,VERSION

#### as root ####
# ensure permissions to destination path
cd "${SOFTWARE_PATH}"
chown -R root:users "${NAME}_${VERSION}"
find "${NAME}_${VERSION}" -type d -exec chmod a-s,u+rwx,g+rx,g-w,o-rwx {} \;
find "${NAME}_${VERSION}" -type f -exec chmod a-s,u+rw,g+r,g-w,o-rwx {} \;
rm -rf tmp_install
ln -s -f -T "${NAME}_${VERSION}" "${NAME}"
exit

#### as common user ####
# test the application (you can put the follow in ~/.profile)
export SOFTWARE_PATH="/home/shared/opt/software"
export NODEJS_HOME="/home/shared/opt/software/nodejs"
export PATH="${PATH}:${HOME}/.npm-global/bin:${NODEJS_HOME}/bin"
# remember to run `npm config set prefix '~/.npm-global'`
npm --version
  • configure your npm prefix
npm config set prefix '~/.npm-global'

Sample ES6 (ECMAScript 6 / ECMAScript 2015) application

  • from
https://www.nodebeginner.org/blog/post/setting-up-a-javascript-project-for-es6-development-with-babel-and-webpack/
https://www.robinwieruch.de/javascript-project-setup-tutorial/
https://www.robinwieruch.de/webpack-setup-tutorial/
  • prepare the folder structure
mkdir dist
mkdir src
  • define a simple main html
cat > dist/index.html << 'EOF'
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="data:;base64,=">
    <title>Hello Webpack</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
EOF
  • define a simple hello world application
cat > src/main.js << 'EOF'
import App from "./app.js";

let app = new App("root");
app.write("Hello Webpack");
EOF

cat > src/app.js << 'EOF'
"use strict";

export default class App {
  constructor(elementId) {
    this.element = window.document.getElementById(elementId);
  }

  write(content) {
    this.element.innerHTML = content;
  }
}
EOF
  • configure node project
cat > package.json << 'EOF'
{
  "name": "test_js_webpack_app",
  "main": "src/main.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --config ./webpack.config.js --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}
EOF
  • configure webpack
cat > webpack.config.js << 'EOF'
module.exports = {
  entry: "./src/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js",
    publicPath: "/"
  },
  devServer: {
    contentBase: "./dist",
  },
  module: {
    rules: [
      {
        include: /src/,
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
};
EOF
  • configure babel
cat > .babelrc << 'EOF'
{
  "presets": ["@babel/preset-env"]
}
EOF
  • setup dependencies
npm install --save-dev webpack webpack-dev-server webpack-cli
npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader
  • run
npm run start
  • build
npm run build

Sample React ES6 (ECMAScript 6 / ECMAScript 2015) application

  • from
https://www.nodebeginner.org/blog/post/setting-up-a-javascript-project-for-es6-development-with-babel-and-webpack/
https://www.robinwieruch.de/javascript-project-setup-tutorial/
https://www.robinwieruch.de/webpack-setup-tutorial/
  • prepare the folder structure
mkdir dist
mkdir src
  • define a simple main html
cat > dist/index.html << 'EOF'
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="data:;base64,=">
    <title>Hello React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
EOF
  • define a simple hello world application
cat > src/main.js << 'EOF'
import App from "./app.js";

let app = new App("root");
app.write("Hello React");
EOF

cat > src/app.js << 'EOF'
"use strict";

import React from "react";
import ReactDOM from "react-dom";

export default class App {
  constructor(elementId) {
    this.element = window.document.getElementById(elementId);
  }

  write(content) {
    ReactDOM.render(<div>{content}</div>, this.element);
  }
}
EOF
  • configure node project
cat > package.json << 'EOF'
{
  "name": "test_js_webpack_react_app",
  "main": "src/main.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --config ./webpack.config.js --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}
EOF
  • configure webpack
cat > webpack.config.js << 'EOF'
const webpack = require('webpack');

module.exports = {
  entry: "./src/main.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js",
    publicPath: "/"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: "./dist",
    hot: true
  },
  module: {
    rules: [
      {
        include: /src/,
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
};
EOF
  • configure babel
cat > .babelrc << 'EOF'
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
EOF
  • setup dependencies
npm install --save-dev webpack webpack-dev-server webpack-cli
npm install --save-dev @babel/core @babel/preset-env
npm install --save-dev babel-loader
npm install --save-dev @babel/preset-react
npm install --save-dev react-hot-loader
npm install --save react react-dom
  • run
npm run start
  • build
npm run build
Retrieved from "https://www.campisano.org/mediawiki/index.php?title=Nodejs_(Application)&oldid=2384"