RAPID Website - Engine Detection | Fronend Svelte

Site : PT Kaltim Prima Coal

Frontend Svelte ini dikembangkan sebagai bagian dari proyek RAPID Website, berfungsi sebagai interface reporting untuk dataset yang telah dikembangkan, serta mendukung proses analisis cepat secara efisien.

Pada dasarnya frontend ini dibuat berdasarkan kebutuhan masing-masing site agar dapat menjawab masalah dan case yang sering terjadi pada operasional.

🚀 Main Feature

Engine Detection

• Current and Shift Summary Report

  • Filter by Department
  • Card summary of Loss Hour and Loss Fuel by Shift
  • Card Current Truck/Equipment who meet the condition
  • Table list general information Engine Detection by Shift
  • Table chart detail Engine Detection by Shift

• Month Summary Historical

  • Under development progress

📁 Project Structure

front/ 
 ├── src/                    
 │ ├── lib/                
 │ │ ├── api/               
 │ │ │ └── fuel-time-loss.js    # GET api for Engine Detection
 │ │ ├── components/            # Component UI building blocks
 │ │ │ ├── Header.svelte        
 │ │ │ └── Sidebar.svelte       
 │ │ ├── data/                  # reusable data
 │ │ │ └── departments.json
 │ │ └── stores/                # State management 
 │ │   └── loading.js           # Loading animation 
 │ ├── routes/              
 │ │ ├── (user)/                # Routing for user/member only
 │ │ │ ├── engine-detection/    
 │ │ │ │ ├── current/           # Current and Shiftly Report
 │ │ │ │ │ └── +page.svelte     
 │ │ │ │ └── historical/        # Historical and Monthly Report
 │ │ │ │   └── +page.svelte
 │ │ │ └── +layout.svelte       # Layout Engine Detection
 │ │ ├── +layout.js             # Off the SSR
 │ │ ├── +layout.svelte         # Render loading state 
 │ │ └── +page.svelte           # Title, and Home Page
 │ └── app.html                 # Body HTML Configuration
 ├── static/                    # Public file
 ├── .env                       # database url (check notion or ask administrator)
 ├── .gitignore             
 ├── .npmrc
 ├── ecosystem.config.cjs       # configuration for PM2 with rapid-front aplication name
 ├── jsonconfig.json
 ├── package-lock.json      
 ├── package.json 
 ├── README.md
 ├── svelte.config.js          
 └── vite.config.js

⚙️ Deployment

# install dependencies
npm install

# create .env file, its for backend or API url so front can get data from this url
VITE_URL_API='http://ip:port/routing'

Developing

Everything you need to build a Svelte project, powered by sv.

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# run or start the server from IP
npm run dev -- --host

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

⚙️ Deployment to LAN SERVER

Local Side

1. Pastikan adapter-node sudah terinstall

# check di package.json, if there's not avail so run this
npm install -D @sveltejs/adapter-node

2. Ubah file .env

# sesuaikan dengan backend server
VITE_URL_API='http://ipaddress:port/api/v1'

3. Hapus folder build dan cache lama

# clear cache, only use for any major changes
rm -rf .svelte-kit build

# if using powershel
rmdir /s /q .svelte-kit
rmdir /s /q build

3. Regenerate ulang .svelte-kit dan build

Setelah itu .svelte-kit/tsconfig.json akan otomatis dibuat ulang.

# build static
npm install
npm run build

Server Site Side

1. Install node.js dan npm

Download node.js langsung dari website resmi https://nodejs.org/en/download/

# check node version
node -v

# check npm version
npm -v

2. Copy paste PM2 untuk monitoring

# Copy paste pm2 folder pada direktori berikut
C:\Users\DIGITALROOM-PC04\AppData\Roaming\npm\node_modules

# Copy paste 2 file (pm2.cmd, pm2 -> file tanpan extension) pada direktori berikut
C:\Users\DIGITALROOM-PC04\AppData\Roaming\npm

3. Copy paste the files

• Bisa copy seluruh folder project, atau hanya

  • build/
  • node_modules

• Taruh dalam folder front

# go into the folder
cd /front

4. Change PORT / IP Address

Go to file index.js file

# front/build/index.js
const path = env('SOCKET_PATH', false);
const host = env('HOST', '0.0.0.0'); # IP Address
const port = env('PORT', !path && '4000'); # change this port

5. Run the Projects

# using node
node build
node build/index.js

# using pm2
cd front
pm2 start --name engine-detection-front build/index.js

⚙️ Update in LAN SERVER

1. Make sure PM2

• Check window service, search PM2.
• Uninstall PM2

# uninstall pm2, open cmd administrator
pm2-service-uninstall

2. Copy paste the file

• Copy paste necessary file or updated file
  • node_modules/
  • build/
• Running start pm2

# start pm2, open cmd administrator
pm2 start ecosystem.config.cjs --env production

# before pm2 save, run pm2 start backend
pm2 save

3. Install pm2-service-windows

• Install pm2 service

# same like the step before on Deployment LAN Server
pm2-service-install -n PM2
....
....
....
# check installment on Deployment LAN Server