Thursday, 23 March 2023

Deployment Node.js Nuxt App with Nginx, SSL with Lets Encrypt

1. Access your Vps

ssh user@ip

2.Install nodejs, npm, yarn

sudo apt update

# select node version
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

# install nodejs
sudo apt install nodejs

# check nodejs
node --version
npm --version

# install yarn
npm install -g yarn

3. Clone, build and run Nuxt app

git clone [your-url-project-on-github]
cd your-project
yarn install
yarn build
yarn start

4. Run Nuxt app using pm2 (process manager for Node.js)

- create file ecosystem.config.js in root Nuxt app

# create file
touch ecosystem.config.js
# with content
module.exports = {
apps: [
{
name: 'NuxtAppName',
exec_mode: 'cluster',
instances: 'max', // Or a number of instances
script: './node_modules/nuxt/bin/nuxt.js',
args: 'start'
}
]
}

- Build and run Nuxt app using pm2

# intall pm2
npm install pm2 -g

# run nuxt app
pm2 start
 
# check pm2
pm2 ls
pm2 logs (Show log stream)
pm2 flush (Clear logs)  
 
# stop nuxt app
pm2 stop [app_name_or_id]
 
# delete all process managed
pm2 delete all
 

- To make sure app starts when reboot

pm2 startup ubuntu
# test reboot server
reboot

5. Setup ufw firewall

# setup ufw
sudo ufw enable
sudo ufw allow http
sudo ufw allow https
sudo ufw allow 'Nginx Full'
sudo ufw delete allow 'Nginx HTTP'
# check ufw status
sudo ufw status

# output:
sudo ufw allow ssh (Port 22)
sudo ufw allow http (Port 80)
sudo ufw allow https (Port 443)

6. Install NGINX and configure

- Install nginx

# install nginx
sudo apt update
sudo apt install nginx

# check nginx working
sudo systemctl status nginx
sudo systemctl enable nginx
sudo systemctl stop nginx
sudo systemctl restart nginx

- Errors (if happen): unknow host Ubuntu-20.04

# open /ect/host
sudo nano /etc/hosts

# update line become
127.0.0.1 Ubuntu-20.04 localhost

- Set Up Nginx Server Blocks (Virtual Hosts) for example.com

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/example.com
sudo nano /etc/nginx/sites-available/example.com

- Config for /etc/nginx/sites-available/example.com

server {
listen 80 default_server;
listen [::]:80
default_server;
 
# Add the following to the location part of the server block
server_name example.com www.example.com;

location / {
proxy_pass http://localhost:3000; #whatever port your app runs on
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

* Now that we have our server block file, we need to enable it. We can do this by creating symbolic link from this file to the sites-enabled directory, which Nginx reads from during startup.

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/  
# to delete symbolic link
cd /etc/nginx/sites-enabled/
rm site_want_delete

- Check nginx config status

# Check NGINX config
sudo nginx -t

# Restart NGINX
sudo service nginx restart

7. Add record for domain

Host Type Value TTL
  @
 A
 your-ip-vps  3600 
 www 
 CNAME 
 example.com 
 3600

8. Add SSL with LetsEncrypt

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com
 
# check certbot auto renew  
sudo systemctl status certbot.timer  
 
# or manually renew ssl (90 day will expired)
sudo certbot renew --dry-run 

Thank you.


Monday, 20 March 2023

Webpack for Beginners #6 - SASS Loaders

>> Tutorial Webpack for Beginners

1. What is SASS Loaders

- Transfer SASS file to CSS file

2. Step by step using

* Install SASS Loaders

npm install node-sass sass-loader --save-dev

* create file src/css/introComponent.scss

$mainColour: #7777bb;

.intro-component{
padding: 20px;
background: $mainColour;
color: #fff;
font-family: arial;

h1{
text-transform: uppercase;
}
}

* Configure webpack.config.js

module.exports = {

//define entry point
entry: './src/script-1.js',

//define output point
output: {
path: 'dist',
filename: 'bundle.js'
},

module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
] //loaders
} //module

};

- test: /\.scss$/, //just wanted run on .scss file

- loader: 'style-loader!css-loader!sass-loader', // which loader we use is style-loader , css-loader and sass-loader

* Running webpack

webpack

>> Soure change on Github 

>> Tutorial Webpack for Beginners

Thank you

Webpack for Beginners #5 - CSS Loaders

>> Tutorial Webpack for Beginners

1. What is CSS Loaders

- Use CSS loaders to load in only the styles we needed, into different parts of our application

- CSS becomes much more modular and esiser to manage

* CSS && Style loaders

- 2 different loader - css-loader, style-loader

+ Css loader, load the css into our JS file

+ Style-loader adds our css into the DOM

2. Step by step using

* Install CSS Loaders

npm install style-loader css-loader --save-dev

* create file src/css/introComponent.css

.intro-component{
padding: 20px;
background: maroon;
color: #fff;
font-family: arial;
}

* Configure webpack.config.js

module.exports = {

//define entry point
entry: './src/script-1.js',

//define output point
output: {
path: 'dist',
filename: 'bundle.js'
},

module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
] //loaders
} //module

};

- test: /\.css$/, //just wanted run on .css file

- loader: 'style-loader!css-loader', // which loader we use is style-loader and css-loader

* Running webpack

webpack

>> Soure change on Github  

>> Tutorial Webpack for Beginners

Thank you






Webpack for Beginners #4 - Babel Loaders

>> Tutorial Webpack for Beginners

1. What is Loaders

- Perform transfromations

- E.g Balel loader transform ES2015 or JSX in vanilla JS

- Many more loaders for other things too (such as SASS)

2. How to using Babel loader

- Install babel-core and babe-loader via npm

- Install any presets we will be using to perform transformations

- Configure webpack.config to tell webpack to use babel to transform our code

3. Step by step using

* Install babel

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

* Configure webpack.config.js

module.exports = {

//define entry point
entry: './src/script-1.js',

//define output point
output: {
path: 'dist',
filename: 'bundle.js'
},

module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
] //loaders
} //module

};

- test: /\.js$/, //just wanted run on .js file

- exclude: /(node_modules)/,  // tell webpack exclude certain files

- loader: 'babel-loader', // which loader we use is babel-loader

- presets: ['es2015']  // which presets we use is es2015 to JavaScript

* Running webpack

webpack

>> Soure change on Github  

>> Tutorial Webpack for Beginners

Thank you





Webpack for Beginners #3 - The webpack.config File

>> Tutorial Webpack for Beginners

1. Create webpack.config

module.exports = {

//define entry point
entry: './src/script-1.js',

//define output point
output: {
path: 'dist',
filename: 'bundle.js'
},
}; 

- entry: entry point

- output: output point

+ path: this is distribution folder (output folder)

+ filename: this is filename bundle.js

* Note: need put all file to src

2. Running webpack

webpack

=> output file dist/bundle.js using in index.html

>> Soure change on Github

>> Tutorial Webpack for Beginners

Thank you




Webpack for Beginners #2 - Installing Webpack & Bundling JS Files

>> Tutorial Webpack for Beginners

1. Install Webpack

npm init
npm install webpack --save-dev

2. Using webpack

// index.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack</title>
</head>
<body>
<div id="body-content">
<div class="intro-component">
<h1>CSS Loaders are Awesome</h1>
</div>
</div>
<script src="./bundle.js"></script>
</body>
</html>
 
// script-1.js
// Welcome Component JS
var message = require('./script-2');
require('./css/introComponent.scss');
 
// script-2.js 
const mssg = "tempus fugit";
module.exports = mssg;


 

* running webpack

webpack script-1.js ./bundle

=> output file bundle.js using in index.html

>> Soure change in Github

>> Tutorial Webpack for Beginners

Thank you.



Webpack for Beginners #1 - Introduction

>> Tutorial Webpack for Beginners

#1 - Introduction

* What you need to know

- JavaScipt

- CSS/ SASS

- HTML

* Source course files on Github

https://github.com/phong2018/webpack-playlist

* What is Webpack for?

- Takes all our asserts and outputs them to a production-ready bundle

+ Bundles JavaScript files into one file, minizing http requests

+ Process SASS/ LESS files into CSS an only use them where needed

+ Convert JSX, ES2015 into vanila JS which browers understand

Thank you.



Publish npm package

  Để publish   pav-kit  lên NPM, bạn hãy làm theo các bước dưới đây. Tôi đã tạo thêm file  index.js  để đảm bảo gói tin hợp lệ. Bước 1: Tạo ...