Setup Aplikasi JS dengan RazzleJS

Membuat direktori proyek aplikasi JavaScript itu lumayan gampang. Tapi bikin aplikasi yang isomorphic , bisa jalan di server (SSR) & juga di browser, itu lain cerita. Lumayan ribet. Razzle bisa bantu menghemat banyak waktu.

Kalo cuma aplikasi JS yang client-side bisa pake bundler semacam Poi atau, yang sering saya pake, Parcel. Tinggal atur konfigurasi sedikit (kalo perlu), kompail, terus deploy ke server. Tapi bikin aplikasi yang isomorphic  itu lain cerita. Lumayan ribet karena kita harus mengatur supaya compiler yang kita pake bisa menghasilkan output yang bisa jalan di NodeJS & browser. Belum lagi urusan routing, navigasi hybrid yang mendukung SSR & SPA. Di sini Razzle bisa membantu menghemat waktu.

Jadi Razzle ini adalah alat untuk membuat project template mirip CRA tapi sifatnya generik (nggak hanya untuk React biarpun di website-nya bilang React) & minimalis. Fitur bawaan Razzle:

  1. HMR untuk kode server & klien
  2. Nggak hanya untuk React, tapi juga mendukung Vue, Angular, Preact.
  3. Server Express
  4. Mode SPA & SSR

Instalasi

Instalasinya kita pake npx.

npx create-razzle-app <nama_project>
Step berikutnya ini sebenernya nggak perlu dijalanin manual krn paket-paketnya seharunya otomatis diinstal oleh Razzle tapi di komputer saya kalo cuma instal terus langsung nge-start server pasti error.

Setelah itu kita perlu instal beberapa paket NPM.

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin mini-css-extract-plugin babel-preset-razzle

Setelah itu baru jalanin dev-server pake perintah npm start & buka localhost:3000.

npm start

If you have issues with css make sure postcss resolves to v8.2.4.
See: https://razzlejs.org/getting-started#common-issues

CssMinimizerPlugin currently uses clean-css,
we will switch to cssnano once it supports postcss v8.2.4.

 WAIT  Compiling...


✔ Client
  Compiled successfully in 1.20s

✔ Server
  Compiled successfully in 180.13ms

✅  Server-side HMR Enabled!
sswp> Handling Hot Module Reloading
> Started on port 3000

Kalo kita liat source-nya, kelihatan kalo halaman itu di-render di server (SSR).

Di direktori proyek ada  client.js & server.js masing-masing adalah entri point untuk kode yang jalan di client (browser) & di server. Jadi yang client pake <BrowserRouter>  untuk routing ala SPA, sedangkan yang server pake <StaticRouter>. Tentang komponen router bisa dibaca sendiri di sini.

Untuk kode yang khusus di server, middleware untuk Express misalnya, kita tulis di server.js.  client.js khusus untuk kode yang harus jalan di browser. Sedangkan yang lain (App, Home) jalan di dua-duanya, server & browser.

const server = express();

server.get('/today',(req, res)=>{
  return res.send({
    today: new Date()
  })
})

Ada satu lagi fail index.js, ini skrip NodeJS untuk jalanin servernya. Kemungkinan besar nggak perlu utak-atik fail ini.

Perlu konfigurasi khusus untuk Webpack atau Babel? Bisa dikustom.

Nggak pake React, tapi pake Vue?

npx create-razzle-app --example with-vue <nama project>

Pake Inferno?

npx create-razzle-app --example with-inferno <nama project>

Jadi Razzle ini cukup membantu. Daripada habis waktu untuk ngeset semuanya dari nol, kalo pake Razzle nggak sampe 10 menit kita udah bisa punya proyek yang bisa jalan di localhost & juga siap jalan di server :)