Post

Learn To Build React Boilerplate #3

Pada article yang lalu, kita telah sampai melakukan configurasi Jest dan melakukan test. Selanjutnya kita akan lanjutkan melakukan react set up. Buka root project pada terminal anda dan lakukan perintah "npm i react-dom --save". 

Bila sudah buatlah file dengan nama dan pada directory seperti ini : "src/client/app.js" dan tambahkan code seperti berikut.

import React, {Component} from 'react'
export default class App extends Component {
render() {
return <div>Welcome to React Boilerplate App</div>
}
}

Lalu render file "app.js" yang baru saja kita buat tadi sebagai component pada "src/client/index.js" dengan code sebagai berikut.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'
ReactDOM.render(<App />, document.getElementById('root'))

Selanjutnya kita perlu menginstal babel react. Kembali pada terminal dan lakukan perintah "npm i babel-preset-react --save-dev ".

Dan, pada file ".babelrc" yang sudah kita buat sebelumnya, ubah configurasinya menjadi seperti ini.

{
"presets": ["env", "react"]
}

Sekarang, ketika kita menjalankan npm run build-client, itu akan membuat app.js dan index.js di pada dist/public dengan kode ES6 yang ditransformasikan ke ES5.

Untuk menghubungkan React App kita ke file HTML, kita perlu memuat index.js dalam file index.html kita. Jangan lupa untuk menghapus teks dari node #root karena React App akan dimount disitu.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Boilerplate</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>

Sebagai informasi, babel hanya sebagai transpiler. Sehingga untuk loading module secara dynamic kita perlu menginstall webpack. Sebelum menginstal, kita dapat memulainya dengan mengubah configurasi di section scripts pada file package.json kita dengan configurasi sebagai berikut.

"scripts": {
"build-babel": "npm run build-babel-server && npm run build-babel-client",
"build-babel-server": "babel src/server --out-dir ./dist",
"build-babel-client": "babel src/client --copy-files --out-dir ./dist/public",
"start": "node ./dist/index.js",
"test": "jest ./src"
}

Webpack memungkinkan kita untuk dengan mudah memodulasi code kita dan menggabungkannya menjadi satu file Javascript. Pada article ini saya masih menggunakan webpack v3. Kembali pada terminal anda, pastikan active directory masih pada root project anda dan lakukan perintah "npm i webpack@^3".

Selanjutnya, pada directory root project kita, buatlah sebuah file dengan nama "webpack.config.js". Selanjutnya tambahkan configurasi untuk 2 entry point yaitu web application dan web server dengan code sebagai berikut.

const client = {
entry: {
'client': './src/client/index.js'
}
};
const server = {
entry: {
'server': './src/server/index.js'
}
};
module.exports = [client, server];

Sekarang mari kita buat lebih spesifik, di mana Webpack akan mengeluarkan bundel dan mengatur target build sehingga mengabaikan modul node asli seperti 'fs' dan 'path' agar tidak dibundel. Untuk klien, kita akan mengaturnya ke web, dan untuk server kita akan mengaturnya ke node.

let path = require('path');
const client = {
entry: {
'client': './src/client/index.js'
},
target: 'web',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist/public')
}
};
const server = {
entry: {
'server': './src/server/index.js'
},
target: 'node',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
};
module.exports = [client, server];

Sebelum kita dapat menjalankan Webpack, kita perlu mengkonfigurasinya untuk menangani kode ES6 dan JSX. Ini dilakukan menggunakan loader. Selanjutnya kita install loader dengan perintah "npm install babel-loader --save-dev".

Selanjutnya, kita perlu memodifikasi configurasu Webpack untuk memasukkan babel-loader supaya dapat dijalankan pada semua file ".js". Kita akan membuat shared objek yang mendeklarasikan bagian modul yang dapat kita gunakan kembali untuk kedua target. Jadi, ubahlah configurasi webpack menjadi sperti ini.

const path = require('path');
const moduleObj = {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ["babel-loader"],
}
],
};
const client = {
entry: {
'client': './src/client/index.js',
},
target: 'web',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist/public')
},
module: moduleObj
};
const server = {
entry: {
'server': './src/server/index.js'
},
target: 'node',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: moduleObj
}
module.exports = [client, server];

Webpack akan membundel library yang direferensikan, yang berarti segala sesuatu yang disertakan dari node_modules akan dikemas. Kita tidak perlu membundel eksternal code, karena paket-paket itu umumnya di minify, dan mereka juga akan menambah waktu dan ukuran build.

Jadi mari kita mengkonfigurasi Webpack untuk mengecualikan semua paket di bawah folder node_modules. Kembali pada terminal dan lakukan perintah "npm i webpack-node-externals --save-dev".

Bila sudah, configurasikan lagi webpack.config.js seperti berikut.

let path = require('path');
let nodeExternals = require('webpack-node-externals');
const moduleObj = {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ["babel-loader"],
}
],
};
const client = {
entry: {
'client': './src/client/index.js',
},
target: 'web',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: moduleObj
};
const server = {
entry: {
'server': './src/server/index.js'
},
target: 'node',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: moduleObj,
externals: [nodeExternals()]
}
module.exports = [client, server];

Dan tentunya kita juga perlu mengubah configurasi pada package.json seperti ini.

"scripts": {
"build": "webpack",
"build-babel": "npm run build-babel-server && npm run build-babel-client",
"build-babel-server": "babel src/server --out-dir ./dist",
"build-babel-client": "babel src/client --copy-files --out-dir ./dist/public",
"start": "node ./dist/server.js",
"test": "jest ./src"
}

Untuk selanjutnya kita tambahkan perintah untuk membersihkan folder dist dan node_modules kita sehingga kita dapat melakukan clean build dan memastikan proyek kita masih berfungsi seperti yang diharapkan. Sebelum kita bisa melakukan itu, kita perlu menginstal paket yang disebut rimraf dengan cara melakukan perintah "npm install rimraff".

Bila sudah, scripts section pada package.json menjadi seperti berikut.

"scripts": {
...
"clean": "rimraf dist node_modules",
...
}

Sekarang kita sudah dapat melakukan clean build dengan webpack. Silahkan lakukan perintah berikut secara berutuan pada terminal anda.

npm run clean
npm install
npm run build

Ini akan membuat dist / server.js dan dist / public / client.js pada root project.

Namun, bila kita perhatikan bahwa index.html sekarang tidak ada. Ini karena, sebelumnya, kita melakuka perintah pada Babel untuk menyalin file yang tidak diubah. Namun, Webpack tidak dapat melakukan itu, jadi kita perlu menggunakan Plugin HTML Webpack. Silahkan install webpack plugin dengan perintah "npm i html-webpack-plugin --save-dev".

Bila sudah, pada file configurasi webpack, pada line pertama di paling atas tambahkan code sebagai berikut.

const HtmlWebPackPlugin = require('html-webpack-plugin')

Selanjutnya kita juga perlu menambahkan plugin tersebut pada client config seperti berikut.

const client = {
entry: {
'client': './src/client/index.js'
},
target: 'web',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist/public')
},
module: moduleObj,
plugins: [
new HtmlWebPackPlugin({
template: 'src/client/index.html'
})
]
}

Sebelum kita build proyek, mari kita modifikasi file HTML kita dan hapus reference ke skrip index.js, karena plugin di atas akan menambahkannya secara otomatis. Ini sangat berguna ketika ada satu atau lebih file dengan nama file dinamis misalnya ketika file dihasilkan dengan unik timestamp.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Boilerplate</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

 Selanjutnya rebuild project dengan perintah berurutan seperti tadi.

npm run clean
npm install
npm run build

Lalu verifikasi apakah unit testing kita berjalan dengan baik dengan perintah "npm test".

Sampai disini kita sudah melakukan integrasi antara react dan webpack, membuat addtional NPM, dan index.js yang dinamis. Karena itu, saya cukupkan dulu article ini sampai disini. Untuk selanjutnya proses akan kita lanjutkan pada article berikutnya.

Sekian yang dapat saya sampaikan, selebihnya saya ucapkan terimakasih.