Websdk-local@2.0.1 sample-app-web [Cannot GET /index.html]

Description
I’m trying to deploy the Zoom Web SDK to embed Zoom in my website.
First of all, I would like to check the operation of the sample.
The sample cannot work with “Cannot GET /index.html”.
I’m new to Nodejs, so I don’t know what’s wrong.

Browser Console Error
Cannot GET /index.html

Which Web Meeting SDK version?
2.0.1

Meeting SDK Code Snippets
The code snippets that are causing the error / issue so we can reproduce.

[vagrant@try-scoolism Local]$ cat package.json 
{
  "$schema": "http://json.schemastore.org/coffeelint",
  "name": "websdk-local",
  "version": "2.0.1",
  "description": "Zoom sample app for web client WebSDK",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "set NODE_ENV=development && set BABEL_ENV=development && node corp.js --corp"
  },
  "keywords": [
    "zoom",
    "meeting",
    "client",
    "webclient",
    "WebSDK"
  ],
  "author": "Jack Yang",
  "license": "ISC",
  "dependencies": {
    "@zoomus/websdk": "2.0.1",
    "lodash": "^4.17.14",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-redux": "7.1.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0"
  },
  "devDependencies": {
    "@babel/cli": "7.13.10",
    "@babel/core": "^7.13.10",
    "@babel/eslint-parser": "^7.13.14",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "7.12.13",
    "@babel/preset-stage-0": "7.8.3",
    "@babel/preset-stage-1": "7.8.3",
    "@babel/runtime": "7.13.10",
    "babel-loader": "^8.0.4",
    "babel-preset-airbnb": "^5.0.0",
    "css-loader": "5.2.0",
    "eslint": "^7.24.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.2.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "6.2.0",
    "node-polyfill-webpack-plugin": "^1.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "4.1.1",
    "webpack": "5.28.0",
    "webpack-cli": "4.5.0",
    "webpack-dev-server": "^4.4.0"
  }
}

Modified to v4 notation according to the version of Webpack Dev Server.

[vagrant@try-scoolism Local]$ cat corp.js
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.dev');

function runFunc(err) {
  if (err) {
    console.log(err);
  }
  console.log('Listening at http://127.0.0.1:9999/index.html');
}

new WebpackDevServer(webpack(webpackConfig), {
  devMiddleware: {
    publicPath: '/static',
  },
  hot: true,
  host: '0.0.0.0',
  //open: 'chrome',
  onAfterSetupMiddleware(server) {
  },
  headers: {
    // 'Cross-Origin-Embedder-Policy': 'unsafe-none',
    // 'Cross-Origin-Opener-Policy': 'unsafe-none',
  },
  //openPage: 'http://127.0.0.1:9999/index.html',
  allowedHosts: 'all',
  historyApiFallback: true,
  proxy: [{
    path: '/meeting.html',
    target: 'http://127.0.0.1:9998/'
  }]
}).listen(9999, '0.0.0.0', runFunc);

new WebpackDevServer(webpack(webpackConfig), {
  devMiddleware: {
    publicPath: '/static',
  },
  hot: true,
  host: '0.0.0.0',
  onAfterSetupMiddleware(server) {
  },
  headers: {
    'Cross-Origin-Embedder-Policy': 'require-corp',
    'Cross-Origin-Opener-Policy': 'same-origin',
  },
  allowedHosts: 'all',
  historyApiFallback: true,
}).listen(9998, '0.0.0.0', runFunc);
[vagrant@try-scoolism Local]$ cat webpack.config.dev.js
const path = require('path');
const webpack = require('webpack');
const args = process.argv.slice(2);
let https = false;
let disableCORP = true;
if (args.includes('--https')) https = true;
if (args.includes('--corp')) disableCORP = false;
console.log('https', https);
console.log('disableCORP', disableCORP);

module.exports = {
  devtool: 'eval',
  entry: {
    index: ['./js/index.js'],
    meeting: ['./js/meeting.js']
  },
  output: {
    path: path.resolve(__dirname, '/static'),
    publicPath: '/static',
    hashDigestLength: 5,
    // filename: `zoom-meeting-${buildVersion}-[name]-[chunkhash].min.js`,
    filename: '[name].min.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 500000
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  externals: {
    'babel-polyfill': 'babel-polyfill',
    react: 'React',
    'react-dom': 'ReactDOM',
    redux: 'Redux',
    'redux-thunk': 'ReduxThunk',
    lodash: {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_',
      var: '_'
    }
  },
  context: __dirname,
  target: 'web',
  devServer: {
    https,
    cert: './localhost.crt',
    key: './localhost.key',
    host: '0.0.0.0',
    port: 9999,
    hot: true,
    overlay: true,
    historyApiFallback: true,
    watchContentBase: true,
    disableHostCheck: true,
    headers: {
      'Access-Control-Allow-Origin': https
        ? 'https://0.0.0.0:9999'
        : 'http://0.0.0.0:9999'
    },
    open: 'chrome',
    openPage: https ? 'https://127.0.0.1:9999' : 'http://127.0.0.1:9999'
  },
  mode: 'development',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.BABEL_ENV': JSON.stringify('development'),
    })
  ]
}

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. npm run start
[vagrant@try-scoolism Local]$ node --version
v14.18.1
[vagrant@try-scoolism Local]$ npm --version
6.14.15

[vagrant@try-scoolism Local]$ npm run start

> websdk-local@2.0.1 start /home/vagrant/sample-app-web/Local
> set NODE_ENV=development && set BABEL_ENV=development && node corp.js --corp

https false
disableCORP false
(node:4677) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:4677) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use async 'start' or 'startCallback' methods.
<w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.
<i> [webpack-dev-server] [HPM] Proxy created: /meeting.html -> http://127.0.0.1:9998/
<w> [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9999/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.0.2.15:9999/
<i> [webpack-dev-server] Content not from webpack is served from '/home/vagrant/sample-app-web/Local/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9998/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.0.2.15:9998/
<i> [webpack-dev-server] Content not from webpack is served from '/home/vagrant/sample-app-web/Local/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
Listening at http://127.0.0.1:9999/index.html
Listening at http://127.0.0.1:9999/index.html
asset index.min.js 5.32 MiB [emitted] (name: index)
asset meeting.min.js 5.31 MiB [emitted] (name: meeting)
runtime modules 51.7 KiB 26 modules
cacheable modules 5.12 MiB
modules by path ./node_modules/ 5.11 MiB 30 modules
modules by path ./js/*.js 7.64 KiB
./js/index.js 4.83 KiB [built] [code generated]
./js/meeting.js 2.81 KiB [built] [code generated]
external "React" 42 bytes [built] [code generated]
external "ReactDOM" 42 bytes [built] [code generated]
external {"commonjs":"lodash","amd":"lodash","root":"_","var":"_"} 42 bytes [built] [code generated]
external "Redux" 42 bytes [built] [code generated]
external "ReduxThunk" 42 bytes [built] [code generated]
webpack 5.28.0 compiled successfully in 12038 ms
asset index.min.js 5.32 MiB [emitted] (name: index)
asset meeting.min.js 5.31 MiB [emitted] (name: meeting)
runtime modules 51.7 KiB 26 modules
cacheable modules 5.12 MiB
modules by path ./node_modules/ 5.11 MiB 30 modules
modules by path ./js/*.js 7.64 KiB
./js/index.js 4.83 KiB [built] [code generated]
./js/meeting.js 2.81 KiB [built] [code generated]
external "React" 42 bytes [built] [code generated]
external "ReactDOM" 42 bytes [built] [code generated]
external {"commonjs":"lodash","amd":"lodash","root":"_","var":"_"} 42 bytes [built] [code generated]
external "Redux" 42 bytes [built] [code generated]
external "ReduxThunk" 42 bytes [built] [code generated]
webpack 5.28.0 compiled successfully in 12125 ms
  1. browse
http://192.168.33.23:9999/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /index.html</pre>
</body>
</html>

Screenshots
If applicable, add screenshots to help explain your problem.

Device (please complete the following information):

  • Device: Windows10
  • OS: Amazon Linux2
  • Browser: Chrome
  • Browser Version [95.0.4638.69 (Official Build) (x86_64)]

Additional context
Add any other context about the problem here.

Hey @ms-niitsuma ,

Have you tried simply hosting the code inside the CDN, or Local, directories on a static web hosting site like github pages? That should do the trick.

For the Components folder, it is a React application so you will have to build it and deploy the built files.

Thanks,
Tommy

Having same issue on my site . Solved by provided above code.

Hey @alexhales42803,

Awesome! I’m glad to hear that worked for you.

Thanks,
Max