Hello world (Webpack) - chung-leong/zigar GitHub Wiki
In this example we're going to create a very simple web app that outputs "Hello world!" to the console through Zig. It demonstrates the basics of working with zigar-loader.
First, we'll create our Node project. In a terminal window, run the following commands:
mkdir hello
cd hello
npm init -y
Next, we'll install React, Webpack, and Babel:
npm install --save-dev react react-dom\
webpack webpack-cli webpack-dev-server css-loader style-loader html-webpack-plugin\
@babel/core @babel/preset-env @babel/preset-react babel-loader http-server
Then we install zig-loader:
npm install --save-dev zigar-loader
We create one directory for JavaScript files and another for Zig files:
mkdir src zig
And place hello.zig
in the latter:
const std = @import("std");
pub fn hello() void {
std.debug.print("Hello world!", .{});
}
We create App.jsx
in src
:
import { hello } from '../zig/hello.zig';
function App() {
return (
<div className="App">
<button onClick={() => hello()}>
Say hello
</button>
</div>
);
}
export default App
Then index.js
:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
And finally index.html
:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webpack + React + Zigar</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
We then create webpack.config.js
:
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js',
},
plugins: [
new htmlWebpackPlugin({
template: 'src/index.html',
}),
],
devServer: {
port: 3030,
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ],
},
{
test: /\.zig$/,
exclude: /node_modules/,
use: 'zigar-loader',
},
],
},
};
And .babelrc
for Babel:
{
"presets": [
"@babel/preset-env",
[ "@babel/preset-react", { "runtime": "automatic" } ]
]
}
In package.json
we add three commands:
"scripts": {
"dev": "webpack serve --mode development",
"build": "webpack --mode production",
"preview": "http-server ./dist"
},
Run the dev
command and open the link provided by webpack-dev-server:
npm run dev
Press Ctrl-Alt-I to open Chrome's development console. Click the button and verify that it causes a test message to appear. Close the browser and shut down webpack-dev-server when you're done.
Run the build
command to build the app:
npm run build
Run the preview
command and open the link provided:
npm run preview
Verify that the production build behaves the same.
You can find the complete source code for this example here.
You have just learned how you can easily make use of WebAssembly in your Webpack project with the help of Zig and Zigar. The app we built in this example doesn't do anything. Our code will do something more useful in the next example.