Skip to main content

​
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

1

Clone Repository

Clone repository MStore Dashboard:
git clone <repository-url>
cd mstore_dashboard
2

Install Dependencies

Install semua dependencies menggunakan pnpm:
pnpm install
Proses ini akan menginstall semua dependencies termasuk Nuxt, Vue, Pinia, Handsontable, dan lainnya.
3

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...
4

Run Development Server

Jalankan development server:
pnpm dev
Dashboard akan berjalan di http://localhost:4001

​
Verify Installation

Setelah instalasi selesai, verifikasi dengan mengakses:
  1. Dashboard: http://localhost:4001
  2. Vue DevTools: Klik icon Vue di browser (jika extension terinstall)
  3. 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

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'
  }
})
Coba hapus folder .nuxt dan node_modules, lalu install ulang:
rm -rf .nuxt node_modules
pnpm install
pnpm dev
Jalankan type check:
pnpm nuxt typecheck
Jika ada error, pastikan semua types sudah tergenerate:
pnpm nuxt prepare
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

ScriptDescription
pnpm devJalankan development server dengan hot reload
pnpm buildBuild untuk production
pnpm previewPreview production build
pnpm generateGenerate static site
pnpm postinstallPrepare Nuxt (auto-run setelah install)

​
IDE Setup

Install extensions berikut:
  1. Vue - Official (Vue.volar)
  2. TypeScript Vue Plugin (Volar)
  3. Tailwind CSS IntelliSense
  4. Nuxt (nuxt-vscode)
  5. 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.

​
Next Steps

Configuration

Konfigurasi Nuxt dan environment

Architecture

Memahami struktur project