fluencelabs/wasm-bindgen
1
0
Fork 0
mirror of https://github.com/fluencelabs/wasm-bindgen synced 2025-06-29 12:41:34 +00:00
Code Issues Projects Releases Wiki Activity

Guide: explain how to deploy the application

Browse Source
This commit is contained in:
Laurentiu Nicola
2018-08-14 22:02:15 +03:00
parent 9147e3211e
commit 8ffa24bfe5
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
guide/src/whirlwind-tour/basic-usage.md
View File

@ -98,7 +98,7 @@ be wasm). As of the time of this writing there's unfortunately not a lot of
tools that natively do this, but Webpack's 4.0 beta release has native wasm tools that natively do this, but Webpack's 4.0 beta release has native wasm
support! Let's take a look at that and see how it works. support! Let's take a look at that and see how it works.
First create an `index.js` file: First, create an `index.js` file:
```js ```js
const js = import("./js_hello_world"); const js = import("./js_hello_world");
@ -114,7 +114,7 @@ yet.
[webpack-issue]: https://github.com/webpack/webpack/issues/6615 [webpack-issue]: https://github.com/webpack/webpack/issues/6615
Next our JS dependencies by creating a `package.json`: Next, define our JS dependencies by creating a `package.json`:
```json ```json
{ {
@ -122,6 +122,7 @@ Next our JS dependencies by creating a `package.json`:
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.0.1", "webpack": "^4.0.1",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
@ -129,11 +130,12 @@ Next our JS dependencies by creating a `package.json`:
} }
``` ```
and our webpack configuration and our `webpack` configuration:
```js ```js
// webpack.config.js // webpack.config.js
const path = require('path'); const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { module.exports = {
entry: "./index.js", entry: "./index.js",
@ -141,23 +143,15 @@ module.exports = {
path: path.resolve(__dirname, "dist"), path: path.resolve(__dirname, "dist"),
filename: "index.js", filename: "index.js",
}, },
plugins: [
new HtmlWebpackPlugin({
title: "Getting started with WASM"
})
],
mode: "development" mode: "development"
}; };
``` ```
Our corresponding `index.html`:
```html
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<script src='./index.js'></script>
</body>
</html>
```
And finally: And finally:
```shell ```shell
@ -168,6 +162,18 @@ $ npm run serve
If you open [http://localhost:8080](http://localhost:8080) in a browser you should see a `Hello, world!` If you open [http://localhost:8080](http://localhost:8080) in a browser you should see a `Hello, world!`
dialog pop up! dialog pop up!
Notice that `html-webpack-plugin` has generated an HTML page which includes `index.js`.
Finally, you may want to deploy your application to a web server like Apache or NGINX.
For that, simply run:
```shell
$ npx webpack
```
The output will be in the `dist` directory. You can now copy it to the root of your
web server.
If that was all a bit much, no worries! You can [execute this code If that was all a bit much, no worries! You can [execute this code
online][hello-online] thanks to [WebAssembly Studio](https://webassembly.studio) online][hello-online] thanks to [WebAssembly Studio](https://webassembly.studio)
or you can [follow along on GitHub][hello-tree] to see all the files necessary or you can [follow along on GitHub][hello-tree] to see all the files necessary