Installation Guide

Panduan ini akan membantu Anda menginstal dan menjalankan MStore Dashboard di environment development.

Prerequisites

Pastikan sistem Anda memiliki:

Node.js

Node.js 20.x atau lebih baru

node --version
# v20.x.x atau lebih tinggi

pnpm

pnpm 10.x atau lebih baru

pnpm --version
# 10.x.x atau lebih tinggi

Install pnpm (jika belum ada)

# Via npm
npm install -g pnpm

# Atau via corepack (recommended)
corepack enable
corepack prepare pnpm@latest --activate

Installation Steps

Clone Repository

Clone repository MStore Dashboard:

git clone <repository-url>
cd mstore_dashboard

Install Dependencies

Install semua dependencies menggunakan pnpm:

pnpm install

Proses ini akan menginstall semua dependencies termasuk Nuxt, Vue, Pinia, Handsontable, dan lainnya.

Setup Environment Variables

Copy file environment example:

cp .env.example .env

Edit file .env sesuai kebutuhan:

# API Backend
NUXT_PUBLIC_API_BASE_URL=http://localhost:3002

# Other configurations...

Run Development Server

Jalankan development server:

pnpm dev

Dashboard akan berjalan di http://localhost:4001

Verify Installation

Setelah instalasi selesai, verifikasi dengan mengakses:

Dashboard: http://localhost:4001
Vue DevTools: Klik icon Vue di browser (jika extension terinstall)
Vue Inspector: Klik button inspector di pojok kiri bawah (dev mode only)

Project Structure After Installation

mstore_dashboard/
├── .nuxt/                  # Generated Nuxt files (auto-generated)
├── .output/                # Build output (after build)
├── app/                    # Nuxt application layer
├── assets/                 # Static assets
├── components/             # Global components
├── composables/            # Global composables
├── features/               # Domain modules
├── locales/                # i18n translation files
├── public/                 # Public static files
├── server/                 # Nitro server
├── stores/                 # Legacy global stores
├── types/                  # Global TypeScript types
├── utils/                  # Utility functions
├── .env                    # Environment variables
├── nuxt.config.ts          # Nuxt configuration
├── package.json            # Dependencies
├── pnpm-lock.yaml          # Lock file
└── tsconfig.json           # TypeScript config

Common Issues

Port 4001 sudah digunakan

Jika port 4001 sudah digunakan, ubah di nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  devServer: {
    port: 4002,  // Ganti ke port lain
    host: '0.0.0.0'
  }
})

Error: Cannot find module

Coba hapus folder .nuxt dan node_modules, lalu install ulang:

rm -rf .nuxt node_modules
pnpm install
pnpm dev

TypeScript errors

Jalankan type check:

pnpm nuxt typecheck

Jika ada error, pastikan semua types sudah tergenerate:

pnpm nuxt prepare

Handsontable license warning

Handsontable memerlukan license key untuk production. Untuk development, warning ini bisa diabaikan.Untuk production, tambahkan license key di component:

<HotTable :licenseKey="'your-license-key'" />

Available Scripts

Script	Description
`pnpm dev`	Jalankan development server dengan hot reload
`pnpm build`	Build untuk production
`pnpm preview`	Preview production build
`pnpm generate`	Generate static site
`pnpm postinstall`	Prepare Nuxt (auto-run setelah install)

IDE Setup

VS Code (Recommended)

Install extensions berikut:

Vue - Official (Vue.volar)
TypeScript Vue Plugin (Volar)
Tailwind CSS IntelliSense
Nuxt (nuxt-vscode)
ESLint

Recommended settings (.vscode/settings.json):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}

Vue DevTools

Install Vue DevTools browser extension untuk debugging:

Backend Requirements

Dashboard ini memerlukan MStore Backend yang berjalan di http://localhost:3002. Pastikan backend sudah running sebelum menggunakan fitur yang memerlukan API. Lihat Backend Setup Guide untuk panduan menjalankan backend.

Setup

Installation Guide

Installation Guide

Prerequisites

Node.js

pnpm

Install pnpm (jika belum ada)

Installation Steps

Verify Installation

Project Structure After Installation

Common Issues

Available Scripts

IDE Setup

VS Code (Recommended)

Vue DevTools

Backend Requirements

Next Steps

Configuration

Architecture

​Installation Guide

​Prerequisites

Node.js

pnpm

​Install pnpm (jika belum ada)

​Installation Steps

​Verify Installation

​Project Structure After Installation

​Common Issues

​Available Scripts

​IDE Setup

​VS Code (Recommended)

​Vue DevTools

​Backend Requirements

​Next Steps

Configuration

Architecture

Installation Guide

Prerequisites

Install pnpm (jika belum ada)

Installation Steps

Verify Installation

Project Structure After Installation

Common Issues

Available Scripts

IDE Setup

VS Code (Recommended)

Vue DevTools

Backend Requirements

Next Steps