Tutorial MERN Stack Studi Case POS #1 Membuat Project Express Js
Pendahuluan
Dalam seri tutorial ini, kami akan membimbing Anda melalui langkah-langkah dalam membangun aplikasi Point of Sale (POS) menggunakan MERN Stack. MERN Stack adalah singkatan dari Mysql, Express.js, React, dan Node.js, yang merupakan kombinasi teknologi populer untuk pengembangan web modern. Pada bagian pertama ini, kami akan memulai dengan membuat proyek Express.js sebagai bagian backend dari aplikasi POS kami.
Langkah 1: Instalasi Express Generator
Buka terminal atau command prompt.
Jalankan perintah berikut untuk menginstal Express Generator secara global:
npm install -g express-generator
Jika instalasi berhasil maka kamu bisa mengetikkan perintah berikut di terminal:
express --version
Maka versi dari express yang kita gunakan akan tampil.
Langkah 2: Membuat Proyek Baru
- Setelah Express Generator terinstal, Anda dapat membuat proyek baru dengan menjalankan perintah:
express --no-view be-pos
Karena kita tidak akan menggunakan view pada be-pos maka kita generate tanpa view
Ketika kita membuat projek baru menggunakan express-generator kita akan mendapatkan struktur direktori seperti ini:
bin/
www
public/
javascript
stylesheets
images
routes/
index.js
users.js
app.js
package.json
File / folder | Keterangan |
bin/www | file ini berisi kode untuk dijalankan dengan perintah node, dengan kata lain untuk menjalankan aplikasi kita eksekusi file ini dengan perintah berikut node ./bin/www . Secara default generator telah menambahkan scriptsstart di dalam package.json yang akan menjalankan perintah node ./bin/www sehingga nantinya kita cukup jalankan npm start untuk menjalankan aplikasi kita. |
public | berisi file-file yang bisa diakses secara publik tanpa perlu kita mendefiniskan routing, digunakan untuk menyimpan file-file statis seperti javascript, gambar, stylesheet atau yang lainnya sesuai keperluan |
routes | berisi file-file yang mendefinisikan routes untuk aplikasi kita. |
app.js | file ini merupakan entry untuk aplikasi yang kita buat, kita akan mendaftarkan route yang kita buat di sini |
package.json | file standar untuk projek Node, berisi informasi dasar terkait aplikasi kita, misalnya nama aplikasi, versi, author, dependency, dan sebagainya. |
Langkah 3: Menjalankan Proyek Express
Masuk ke direktori proyek yang baru dibuat dengan menjalankan perintah
cd be-pos
Instal dependensi proyek dengan menjalankan perintah
npm install
Setelah dependensi terinstall, Anda dapat menjalankan proyek dengan menjalankan perintah:
npm start
Proyek akan berjalan di http://localhost:3000
secara default.
Ringkasan
Dalam tutorial ini, kami telah membantu Anda mempersiapkan lingkungan pengembangan Anda dan mengkonfigurasi awal proyek menggunakan Express Generator. Dengan Express Generator, Anda dapat membuat proyek Express.js baru dengan cepat dan mulai mengembangkan aplikasi web tanpa harus memulai dari awal. Selanjutnya, Anda dapat menyesuaikan proyek Anda sesuai dengan kebutuhan Anda dan memperluas fungsionalitasnya sesuai keinginan.