Showing posts with label development. Show all posts
Showing posts with label development. Show all posts

Wednesday, December 5, 2018

How to deploy NodeJS ReactJS to AWS EC2

I am working on a web application, which BackEnd is in NodeJS, FrontEnd is ReactJS Single Page Web Application.

I want to deploy the application on AWS EC2, Here is how I did it.

2018-12-05-00-19-12
Client - Server overview

 NodeJS

node version : v10.13.0

npm version : 6.4.1

BackEnd application runs on port 3000

I use PM2 for  process manager for Node.Js http://pm2.keymetrics.io/

ReactJS

React-scripts : 2.1.1 is ReactJS development tool, also help us to bundle javascript, css, images... into a build folder.

NGINX

Version : nginx version: nginx/1.14.0 (Ubuntu) , to find ngnix version
Change  nginx default file: /etc/nginx/sites-enabled/default

1. Add proxy pass for API
location ~ ^/api/ {
   proxy_pass      http://127.0.0.1:3000;
}

to pass all API requests to NodeJS server.

2. Add root static folder
root /home/ubuntu/public_html/lime-fe/build;

To point default static folder to the build folder of react-script.

3. Also it is important to have

location / {
    try_files $uri /index.html;
}
4. Reload nginx sever:
 
# systemctl restart nginx
OR
# sudo systemctl restart nginx
5. Additional setups: - Remove nginx version
server_tokens off;
- Enable Gzip
        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        

to let reactJS application handles the routing (URLs) instead of nginx.

Full configuration file.


Setup environment variables

~/.bash_profile

Some variables :

export NODE_ENV=production

To reload bash environment, using the command

source ~/.bash_profile

OR
. ~/.bash_profile

Some notes:

1. npm install without devDependencies:

If server setup with production mode on

NODE_ENV=production

, NPM install will ignore devDependencies

We can use npm install --only=dev or set NPM production.

to check if npm is in production mode , we can use the command:

npm config get production

To turn off production mode:

npm config set -g production false

2. pm2 doesn’t reload environment variables:

we need to use --update-env ,
e.g:
 pm2 reload sever --update-env

References

  1. How to install NodeJS and NPM : https://github.com/nodesource/distributions/blob/master/README.md

  2. How to install
    https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-16-04

  3. How to check Ubuntu version: https://askubuntu.com/questions/686239/how-do-i-check-the-version-of-ubuntu-i-am-running

  4. How to install MongoDB on Ubuntu: https://docs.mongodb.com/v3.2/administration/install-on-linux/

Wednesday, October 24, 2018

Spring Boot Sleuth and ZipKin

This post is my implementation of the post here: https://reflectoring.io/tracing-with-spring-cloud-sleuth/


Although the post already included the source code, but it is still pretty hard for me to start


So I created this post to help me to remember how to make Slueth and Zipkin work.


Spring Cloud Sleuth


will add traceId and spanId to logger
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-sleuth</artifactId>
<version>${spring-cloud.version}</version>
</dependency>

Analyze Traces with ZipKin


Logger collector and analytics
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-zipkin</artifactId>
<version>${spring-cloud.version}</version>
</dependency>

spring.sleuth.sampler.percentage=1.0


Is percentage of sampler, the default value is 0.1 ( 10%) that means you only take 10% of request to sampler


Change to 1.0 ( 100% ) to sample all of request.


Repo URL: https://github.com/vanduc1102/tutorials/tree/master/spring-sleuth

 

Monday, October 8, 2018

Spring Boot 2 - REST template project

Recently, I have a chance to work with Spring Boot, it was pretty hard for me to create Spring project without template that is ready for development. So I created a template to help me save time for next projects.

What are included in this boilerplate:

Github Repo: https://github.com/vanduc1102/spring-boot-examples/tree/master/spring-boot-2-rest-service-basic

Monday, April 23, 2018

Hiểu về Module trong ES6

Bài viết được dịch từ : https://www.sitepoint.com/understanding-es6-modules/

Bài viết này tìm hiểu về module của ES6, cách chúng đang được sử dụng ngày nay với sự trợ giúp của trình chuyển đổi(transpiler).
Hầu như mọi ngôn ngữ đều có khái niệm về các module - một cách để bọc các function được khai báo trong một file khác. Thông thường, một developer tạo ra một thư viện mã hóa đóng gói chịu trách nhiệm xử lý các nhiệm vụ liên quan. Thư viện đó có thể được tham chiếu bởi các ứng dụng hoặc các module khác.

Những lợi ích:

  1. Code thể được chia thành các file nhỏ hơn với những chức năng độc lập.

  2. Các module tương tự có thể được chia sẻ trong rất nhiều ứng dụng khác nhau.

  3. Lý tưởng nhất, các module không bao giờ được kiểm tra bởi một nhà phát triển khác, bởi vì chúng đã được chứng minh là hoạt động.

  4. Code đã chiếu một module được hiểu rằng đó là sự phụ thuộc. Nếu tập tin module được thay đổi hoặc di chuyển, sẽ xảy ra vấn đề ngay lập tức.

  5. Code module (thường) giúp xóa bỏ xung đột đặt tên. Function x () trong module1 không thể đụng độ với function x () trong module2. Các tùy chọn như namespace được sử dụng , và ta sẽ có module1.x ()module2.x ().

Vậy các module trong JavaScript ở đâu?


Bất cứ ai bắt đầu phát triển Web một vài năm trước đây sẽ bị sốc khi phát hiện ra không có khái niệm về các module trong JavaScript. Không thể trực tiếp tham chiếu (reference) hoặc bao gồm (include) một file JavaScript trong một file Javascript khác. Do đó, các developer đã sử dụng các tùy chọn thay thế.

Nhiều thẻ <script> HTML


HTML có thể tải bất kỳ tệp JavaScript số nào bằng cách sử dụng nhiều thẻ <script>:





Trung bình trong năm 2018 một trang web sử dụng 25 tập lệnh riêng biệt, nhưng đó không phải là giải pháp tối ưu:

  • Mỗi tập lệnh khởi tạo một yêu cầu HTTP mới, ảnh hưởng đến hiệu suất trang. HTTP/2 làm giảm bớt vấn đề ở một mức độ nào đó, nhưng nó không giúp các tập lệnh được tham chiếu trên các tên miền khác như CDN.

  • Mỗi tập lệnh tạm dừng xử lý thêm trong khi tập lệnh chạy.

  • Quản lý phụ thuộc (dependencies) là một quy trình thủ công. Trong đoạn mã trên, nếu lib1.js tham chiếu mã trong lib2.js, mã sẽ thất bại vì nó chưa được tải. Điều đó có thể phá vỡ quá trình thực thi của JavaScript.

  • Chức năng có thể ghi đè lên những người khác trừ khi những mô hình module( module patterns) thích hợp được sử dụng. Ban đầu các thư viện JavaScript nổi tiếng hay sử dụng các tên hàm toàn cục hoặc ghi đè các phương thức nguyên gốc.

Nối các file script lại ( Script Concatenation )


Một giải pháp cho các vấn đề của nhiều thẻ <script> là ghép tất cả các tệp JavaScript vào một tệp lớn duy nhất. Điều này giải quyết một số vấn đề về hiệu suất và quản lý phụ thuộc, nhưng nó có thể phải qua một bước xây dựng và thử nghiệm thủ công.

Trình tải module (Module Loaders)


Các hệ thống như RequireJSSystemJS cung cấp một thư viện để tải và đặt tên các thư viện JavaScript khác khi chạy. Các module được tải bằng cách sử dụng các hàm của Ajax khi được yêu cầu. Các hệ thống trợ giúp, nhưng có thể trở nên phức tạp đối với các cơ sở mã lớn hơn hoặc các trang web thêm các thẻ <script> chuẩn vào hỗn hợp.

Module Bundlers, Preprocessors và Transpilers


Bundlers (trình đóng gói) giới thiệu một cách để biên dịch mã JavaScript được tạo ra tại quá trình built. Mã được xử lý để đóng gói các thư viện và tạo ra một tệp ghép nối tương thích với trình duyệt của ES5. Các tùy chọn phổ biến bao gồm Babel, Browserify, webpack và các trình chạy tác vụ phổ biến hơn như GruntGulp.

Quá trình tạo ra một file JavaScript đòi hỏi một số nỗ lực, nhưng có những lợi ích:

  • Quá trình xử lý được tự động hóa do đó ít có khả năng xảy ra lỗi của con người hơn.

  • Xử lý thêm có thể linter( kiểm tra chính tả và ngữ pháp), gỡ bỏ các lệnh gỡ lỗi ( debugger), rút ​​gọn tệp kết quả, v.v.

  • Transpiling cho phép bạn sử dụng các cú pháp thay thế như TypeScript hoặc CoffeeScript.

Module ES6


Các tùy chọn ở trên giới thiệu một loạt các định dạng định nghĩa module cạnh tranh. Cú pháp được chấp nhận rộng rãi bao gồm:

  • CommonJS - module.exports và required được sử dụng trong Node.js

  • Định nghĩa module bất đồng bộ (AMD).

  • Định nghĩa module toàn cục (UMD).

Vì thế, một tiêu chuẩn về module được hỗ trợ mặc định trong ES6 (ES2015) đã được đề xuất.

Mọi thứ bên trong module ES6 đều được đặt ở chế độ riêng tư theo mặc định và chạy ở chế độ nghiêm ngặt (không cần sử dụng 'use restrict'). Các biến, hàm và lớp công muốn được công khai phải sử dụng từ khóa export.

Ví dụ:



Một ví dụ khác chỉ sử dụng một từ khóa export  duy nhất:



Import sẽ được sử dụng để load những thành phần từ file khác vào.



Trong trường hợp này, lib.js nằm trong cùng thư mục với main.js. Tham chiếu tệp tuyệt đối (bắt đầu bằng /), các tham chiếu tệp tương đối (bắt đầu ./ hoặc ../) hoặc URL đầy đủ có thể được sử dụng.

Nhiều thành phần có thể được import vào cùng một lúc:



import có thể được bí danh (allias) để giải quyết vấn đề trùng tên:



Cuối cùng, tất cả các thành phần công khai có thể được import bằng cách cung cấp một không gian tên:


Sử dụng ES6 Modules trên những trình duyệt


Tại thời điểm viết bài, ES6 đã hỗ trợ module trên các trình duyệt dựa trên Chromium (v63 +), Safari 11+ và Edge 16+.Firefox sẽ hỗ trợ mặc định từ phiên bản 60 (phải bật nó lên bằng mở about:config đối với các phiên bản v58 +).

Các tập lệnh sử dụng mô-đun phải được tải bằng cách đặt thuộc tính type = "module" trong thẻ <script>. Ví dụ:



Hoặc inline script



Module được phân tích cú pháp (parse) một lần, bất kể số lần chúng được tham chiếu trong trang hoặc các mô-đun khác.

Những vấn đề có thể gặp với server


module phải được phân phát bằng application/javascript MIME. Hầu hết các máy chủ sẽ tự động thực hiện việc này, nhưng hãy cảnh giác với các tập lệnh được tạo động hoặc tệp .mjs (xem phần Node.js bên dưới).

Các thẻ <script> thông thường có thể tìm nạp tập lệnh trên các tên miền khác nhưng các mô-đun được tìm nạp bằng cách sử dụng chia sẻ tài nguyên gốc (CORS). Do đó, các mô-đun trên các miền khác nhau phải đặt tiêu đề HTTP thích hợp, chẳng hạn như Access-Control-Allow-Origin: *.

Cuối cùng, các mô-đun sẽ không gửi cookie hoặc thông tin đăng nhập khác trừ khi thuộc tính crossorigin = "use-credentials" được thêm vào thẻ <script> và phản hồi chứa tiêu đề Access-Control-Allow-Credentials: true.



Sự thực thi mô-đun  đã được hoãn lại

Việc thực thi kịch bản lệnh <script defer> được trì hoãn cho đến khi file được tải và phân tích cú pháp. module - bao gồm cả tập lệnh inline script - trì hoãn theo mặc định. Thí dụ:


Chưa hỗ trợ module


Các trình duyệt không có hỗ trợ module sẽ không chạy tập lệnh type = "module". Một kịch bản dự phòng có thể được cung cấp với một thuộc tính nomodule mà các trình duyệt tương thích module bỏ qua. Ví dụ:


Bạn có nên sử dụng các mô-đun trong trình duyệt không?


Những trình duyệt hỗ trợ đang nhiều dần lên, nhưng có thể hơi sớm để chuyển sang module ES6. Hiện tại, có lẽ tốt hơn nên sử dụng trình đóng gói module để tạo tập lệnh hoạt động ở mọi nơi.

Sử dụng mô-đun ES6 trong Node.js


Khi Node.js được phát hành vào năm 2009, sẽ không để tưởng tượng ra được là nó không có module. CommonJS đã được thông qua, có nghĩa là trình quản lý gói Node, npm, có thể được phát triển. Mức sử dụng tăng theo cấp số nhân từ thời điểm đó.

Một module CommonJS có thể được mã hóa theo cách tương tự với module ES2015. module.exports được sử dụng thay export:



require (thay vì import) được sử dụng để kéo module này vào một tập lệnh hoặc module khác



require có thể được dùng để import tất cả các thành phần công khai:



Vì vậy, các module ES6 dễ thực hiện trong Node.js, phải không? Er, không.

Module ES6 nằm phía sau cờ trong Node.js 9.8.0+ và sẽ không được triển khai đầy đủ cho đến ít nhất là phiên bản 10. Trong khi các module CommonJS và ES6 chia sẻ cú pháp tương tự, chúng hoạt động theo các cách khác nhau cơ bản:

  • Các module ES6 được phân tích cú pháp trước để phân tích thêm các thành phần cần import trước khi mã được thực hiện.

  • Các module CommonJS tải các phụ thuộc theo yêu cầu trong khi thực thi mã.

Nó sẽ không tạo sự khác biệt trong ví dụ trên, nhưng hãy xem xét mã module ES2015 sau:



Thứ tự thực thi có thể quan trọng trong một số ứng dụng, và điều gì sẽ xảy ra nếu các mô đun ES2015 và CommonJS được trộn lẫn trong cùng một tệp? Để giải quyết vấn đề này, Node.js sẽ chỉ cho phép các module ES6 trong các tệp có phần mở rộng .mjs. Các tệp có phần mở rộng .js sẽ mặc định là CommonJS. Đó là một tùy chọn đơn giản, loại bỏ phần lớn sự phức tạp và phải hỗ trợ các trình chỉnh sửa mã và các trình soạn thảo.

Bạn có nên sử dụng module ES6 trong Node.js không?


Module ES6 chỉ thực tế từ Node.js v10 trở đi (được phát hành vào tháng 4 năm 2018). Việc chuyển đổi một dự án hiện có không có khả năng dẫn đến bất kỳ lợi ích nào và sẽ khiến cho một ứng dụng không tương thích với các phiên bản trước của Node.js.

Đối với các dự án mới, các mô đun ES6 cung cấp một thay thế cho CommonJS. Cú pháp giống hệt với mã hóa phía máy khách và có thể cung cấp một tuyến đường dễ dàng hơn cho những ửng dụng được viết bằng JavaScript từ server đến client (isomorphic JavaScript).

Tương lai gần của module


Một hệ thống module JavaScript chuẩn hóa mất nhiều năm để đến hoàn thành, và thậm chí còn lâu hơn để thực hiện, nhưng các vấn đề đã được sửa chữa. Tất cả các trình duyệt chính và Node.js từ giữa năm 2018 đều hỗ trợ các module ES6, mặc dù sự chậm trễ chuyển đổi sẽ được mong đợi trong khi mọi người nâng cấp.

Tìm hiểu các module ES6 sẽ giúp ích cho con đường Javascript Developer của bạn trong tương lai.













Tuesday, October 10, 2017

Replace bower by NPM

Here is what I did when I tried to replace Bower by NPM for
MEANJS-0.5.0

bower configuration:
[gist https://gist.github.com/vanduc1102/dd97c58d5900655acb98d45b1505fa12]

That mean all the frondend libs will store in public/lib folder.

Now after I moved all the libs to package.json,
Oops, there is a small change, angular-bootstrap in will change to
angular-ui-bootstrap with NPM

[gist https://gist.github.com/vanduc1102/fb18241724ed4aacb6b8afb7b3ba2e62]

And a new gulp task:
[gist https://gist.github.com/vanduc1102/a70ed41f476dd4b5c6465747b18f88ea]

Update package.json
[gist https://gist.github.com/vanduc1102/d10d0c99ec1b4281c6a321e2ff213c67]

Sunday, September 24, 2017

How to print DEBUG in PHP

While I am new to PHP, sometimes I find it is hard to debug and something in PHP.

I added some notes here will help me to summarize the way that I used to debug.

Predefined constants


PHP has a large number of predefined constants. we have seven most important, most practical and most useful PHP Magic Constants.

__FILE__ – The full path and filename of the file.
__DIR__ – The directory of the file.
__FUNCTION__ – The function name.
__CLASS__ – The class name.
__METHOD__ – The class method name.
__LINE__ – The current line number of the file.
__NAMESPACE__ – The name of the current namespace

Print variables


 

1. var_dump

[code lang="php"]

void var_dump ( mixed $expression [, mixed $... ] )

[/code]

Print a variable and continues to execute the script

I have a snippet code in VSCode for the function:

[code lang="javascript"]

"Echo to webpage": {
"prefix": "duk--echo",
"body": [
"echo('<pre class=\"duk--\">' . __FILE__ . ':' . __LINE__ ); var_dump( $data ); echo('</pre>');"
],
"description": "Echo to webpage"
},

[/code]

2. die


This language construct is equivalent to exit().









[code lang="php"]
void exit ([ string $status ] )
[/code]


My snippet code:
[code lang="javascript"]
"Die to webpage": {
"prefix": "duk--die",
"body": [
"var_dump( $1 ); die();"
],
"description": "Echo to webpage"
}
[/code]

That will print a variable before existing.


Error Handling Functions



Method:
[code lang="php"]
bool error_log ( string $message [, int $message_type = 0 [, string $destination [, string $extra_headers ]]] )
[/code]

Links



var_dump: http://php.net/manual/en/function.var-dump.php
Error Handling Functions: http://php.net/manual/en/ref.errorfunc.php
die: http://php.net/manual/en/function.die.php

Saturday, September 16, 2017

How to create snippets code in VSCode?

Software: VS-Code version 1.12.2

Snippets code are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements.

For me, I use snippets code for some statements that I use for debugging with PHP.

Here is how to create snippets code for debugging in PHP.

In VS Code, Open Preferences -> User Snippets --> Choose a Language (for me PHP)

Add some code below.

[gist https://gist.github.com/vanduc1102/13d92493c33fd5e936a974c3e7adfb34 /]

https://gist.github.com/vanduc1102/13d92493c33fd5e936a974c3e7adfb34.js

From now, I can use my snippets code by typing prefix.

Friday, September 15, 2017

Colorizing logs with iTerm 2 console

Software: Iterm2 version 3.0.15

While developing web applications with iTerm2, I found it is quite difficult to read the logs come from Server.

Luckily, I use iTerm 2 so that I can config colorizing the logs simply.

Let begin.

In iTerm 2 -> open Preference -> Profile -> Advanced -> Trigger

iterm2-trigger-regex

The Regular Expression reference is conformed ICU's Regular Expressions

Result:

iterm-2-logger-colorized

Regex lists:

[code lang="cpp"]

(?i:.*(fatal).*)

(?i:.*(error).*)

(?i:.*(warn).*)

(?i:.*(debug).*)

(?i:.*(info).*)

[/code]