- vừa được xem lúc

Deploy ứng dụng ReactJS lên GitHub-Pages

0 0 60

Người đăng: Quang Minh

Theo Viblo Asia

Giới thiệu

Bạn có một ứng dụng ReactJS, và bạn muốn deploy ứng dụng của bạn lên internet và chia sẻ cho mọi người nhưng chưa biết phải làm thế nào.

Bài viết này là một giải pháp cho bạn, hướng dẫn bạn public ứng dụng lên GitHub Pages, hãy cùng bắt đầu nhé.

Tạo project

Phần này giành cho các bạn chưa có ứng dụng, hãy tạo 1 ứng dụng ReactJS với package create-react-app, nếu bạn chưa biết về package này, có thể tìm hiểu thêm tại bài viết này link

Mình sẽ tạo ứng dụng có tên là deploy-github với câu lệnh sau:

$npx create-react-app deploy-github

Sau đó mở và chạy app ở dưới local:

// mở thư muc app
$ cd deploy-github // khởi chạy app
$ npm start

Tạo repository

Mở github của bạn lên, tạo một repository để chứa code của app bạn mới tạo Ở đây mình tạo repository có tên là deploy-github

Commit code của app bạn tạo vào repo github

// Tạo mới git
$ git init // Commit source code
$ git add .
$ git commit -m 'first commit'

Add remote và push code lên github

// Add remote
$ git remote add origin _@.com:minhlq-0928/deploy-github.git // Push code
$ git push origin master

Cài đặt gh-pages

Cài đặt package gh-pages với lệnh sau

$ npm install --save gh-pages

Cần thêm code ở file package.json như sau:

// Thêm đường dẫn homepage
// https://[your-user-name].github.io/[your-repo-name]/
"homepage": "https://minhlq-0928.github.io/deploy-github/", // Thêm command predeploy & deploy app
"predeploy": "npm run build",
"deploy": "gh-pages -d build",

Chạy deploy app

$ npm run deploy

Vào link homepage để xem kết quả nào

Demo

Các bạn xem kết quả demo tại đây nhé: Demo

Nguồn tham khảo: linklink

Note

Có một vài bạn đã feedback là cách này không còn hoạt động, mình đã kiểm tra lại và đã cập nhật lại bài viết vào hôm nay ngày (23/10/2019). Cảm ơn các bạn đã đọc và phản hồi lại bài viết của mình 😃.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 524

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 396

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 734

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 357

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 448

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 433