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:
- 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
- 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.