Access npm tutorial/demo from host other than localhost

[tpmccallum]

💡 Feature description

At present the npm tutorial is built and run on localhost.

I tried to configure the host and port settings in the webpack.config.js file, according to webpack's documentation. The goal being to build the wasm-pack npm demo on a server and then access it from a different (remote) machine. However, it seems that integrating this functionality might not be as straight forward as some config. Here is a webpack issue on the topic.

💻 Basic example

I have tried the following different configurations. These were not successful unfortunately.
package.json

"scripts": {
    "start": "webpack-dev-server --host 0.0.0.0 --port 8080"
  }

terminal

HOST='0.0.0.0' PORT=8080 npm start

webpack.config.js

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0',
    port: 8080
  }
};

Perhaps there is something I am missing. Also, if there is something that you can suggest for me to go ahead and pursue; I would be happy to spend some time finding, implementing, testing and documenting a solution.
Just FYI:

• the code from the demo builds successfully.
• the new npm package was published (publicly) successfully
• when the config changes were made, npm always started without error. I could just never reach the server remotely
• ports are definitely open on the machine
• there are no external network errors (firewalls etc) preventing this from succeeding.

Thank you so much. Loving wasm-pack!

Kind regards
Tim

[tpmccallum]

Hi :)
Good news, managed to get this working.

Below is the original webpack.config.js file that I was using whilst having the issue of no external access (and therefore only accessing the demo from localhost).

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require('path');

module.exports = {
  entry: "./bootstrap.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bootstrap.js",
  },
  mode: "development",
  plugins: [
    new CopyWebpackPlugin(['index.html'])
  ],
};

Solution
Below is the new webpack.config.js (which I tweaked slightly). I am now able to access the demo externally.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");

module.exports = {
    entry: './bootstrap.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './bootstrap.js',
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new WasmPackPlugin({
            crateDirectory: path.resolve(__dirname, ".")
        })
    ],
    mode: 'development'
};

Also the following two installations were used to make the new config succeed.
npm install --save-dev @wasm-tool/wasm-pack-plugin
npm install --save-dev html-webpack-plugin

Hope this helps out in some way. Please provide any feedback.

Kind regards
Tim