Setup e-commerce project Laracom với Valet & NPM

Mục đích tutorial này

Giúp bạn setup nhanh một project e-commerce, với framework Laravel và các tool hỗ trợ: Valet, NPM.

Sau khi setup thành công, sẽ được một project chạy được cả Frontend lẫn Backend (CMS), giúp những ai có ý định tìm hiểu một hệ thống e-commerce hoạt động như nào sẽ có một project hoàn chỉnh để vọc vọ.

Đồng thời cũng có thể review các pattern code khá hay từ Laracom.

Laracomproject

Q1: WHAT are prerequisites – Điều kiện cần thiết để follow tutorial này?

Q2: HOW-to setup Laracom ở môi trường local?

1. Trước hết cần chuẩn bị database, ở đây mình dùng Sequel Pro để tạo database, đặt tên là laracom

create_db

 

2. Kế đến mở Terminal, trong tutorial này, mình đã clone source Laracom về tại folder:

path/to/Dev/Projects/laracom_latest

path_to

 

Trong đây có những file gì? Chạy command ll để xem nhé:

inside-projects

Ở phạm vi bài viết này, chúng ta sẽ chủ yếu quan tâm đến folder project – folder chính chứa source code của project e-commerce Laracom mà chúng ta chuẩn bị setup.

 

3. Truy cập vào folder project, để tiến hành cài đặt:

Install các Package để run project

cd project

composer install

valet install

 

Build & compile assets (css & js)

npm install

npm run dev

 

Sau khi chạy “npm run dev“, có thể bấm Ctrl+C để exit process, chủ yếu chạy command này để generate ra file CSS + JS bundle, dùng chung cả project Laracom này là style.min.css & front.min.js.

bundle_assets

 

4. Sau đó, copy file .env.example ra .env, và đổi thông tin database localenv_n_db_setup

Nhớ là update thông tin của DB local trên máy tính của bạn nhé:

  • DB_USERNAME
  • DB_PASSWORD
  • DB_DATABASE=laracom (cái này mình đã tạo ở Bước 1)

 

5. Sau khi setup info database trong .env xong, chạy tiếp các lệnh sau để Migrate database scheme & seeding data:

php artisan migrate –seed

 

6. Bước QUAN TRỌNG, để display các images dùng trong project, các bạn chạy lệnh sau để symlink folder storage qua public (folder chính load images/assets của project)

php artisan storage:link

 

7. Đến đây, các bạn dùng Valet để mapping domain chạy phía local như sau:

valet link

(nhớ là lúc này chúng ta vẫn đang đứng tại folder “project” nhé)

valet_link

 

8. Chạy thử trên domain local:

  • Valet hỗ trợ map domain theo đúng tên của folder mà bạn dùng để link, theo format:

<any_name>.test

Ví dụ: foobar.test

hahaha.test

Yeaha.test

  • Do vậy, giờ bạn đã có thể truy cập app Laracom từ domain project.test (sau khi đã valet link“)

FRONTEND:

Laracom_Front

 

BACKEND/CMS:

Dùng account admin để login vào: [email protected]/secret

Laracom_Back

 

Và thế là bạn đã setup xong project e-commerce Laracom rồi.

Cùng vọc vọ thôi nào. (nếu được thì hãy donate cho tác giả Laracom nhé: https://laracom.net/)

 

Chúc các bạn triển khai thành công~

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.