How can I have a third parallel compilation for the WebSockets server?

[silviubogan]

A big part of the WS server is already written: it uses TypeScript, the same path alias as for the main server and preferably ES6 import syntax. I want to be able to watch-build and run it separately for easier debugging. I just moved the code into its own ws.tsx file (I tested it a little bit before although it still has some bugs I must solve) and I do not know what to do next in regards to using the same path aliases.

I put that ws.tsx file inside the server/ directory which contains the main server in index.tsx.

Any help is greatly appreciated.

Thanks!

Update 1

Further information: the contents of tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
    ],
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strictNullChecks": true,
    "skipLibCheck": true,
    "baseUrl": "src",
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "include": [
    "src"
  ]
}

[fivethreeo]

Would have to add a extra start server plugin that starts a different entrypoint.

[fivethreeo]

https://github.com/jaredpalmer/razzle/blob/master/packages/razzle-start-server-webpack-plugin/src/StartServerPlugin.js#L19

https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/createConfigAsync.js#L189

razzle/packages/razzle/config/createConfigAsync.js

Line 717 in b8154c0

new StartServerPlugin(webpackOptions.startServerOptions),

razzle/packages/razzle/config/createConfigAsync.js

Line 702 in b8154c0

config.entry.server.unshift(

[silviubogan]

I've put this code in the file webpack.config.server.babel.js as mentioned here:

import StartServerPlugin from "start-server-webpack-plugin";

export default {
  plugins: [
    // Only use this in DEVELOPMENT
    new StartServerPlugin({
      // print server logs
      verbose: true,
      // print plugin/server errors
      debug: false,
      // name of the entry to run, defaults to 'main'
      entryName: 'ws-server',
      name: 'src/server/ws.tsx',
      // any arguments to nodejs when running the entry, this one allows debugging
      // nodeArgs: ['--inspect-brk'],
      // any arguments to pass to the script
      // scriptArgs: ['scriptArgument1', 'scriptArgument2'],
      // Allow typing 'rs' to restart the server. default: only if NODE_ENV is 'development'
      // restartable: true,
      // Only run the server once (default: false)
      // once: false,
    }),
  ],
}

When I run npm start this file is not read, I think. Should I put the plugin instance in config.razzle.js instead?

[silviubogan]

I push the following into the config:

new StartServerPlugin({
  verbose: true,
  debug: false,
  entryName: 'ws-server',
  name: 'src/server/ws.tsx',
}))

but it tells me:

Entry src/server/ws.tsx not found. Try one of: static/js/0.chunk.js static/js/1.chunk.js static/js/client.js static/js/0.chunk.js.map static/js/1.chunk.js.map static/js/client.js.map ../assets.json

If name is not a good place to specify the entrypoint of the new server plugin instance, where should I specify the entrypoint?

[fivethreeo]

// razzle.config.js
'use strict';

const StartServerPlugin = require('razzle-start-server-webpack-plugin');

module.exports = {
    modifyWebpackConfig(opts) {
        const config = opts.webpackConfig;
        const options = opts.options.webpackOptions;

        if (opts.env.target === 'node') {
            config.entry.wsserver = ['./src/server/ws.tsx'];

            if (opts.env.dev) {
                config.entry.wsserver.unshift(
                  `${require.resolve('webpack/hot/poll')}?300`
                );
        
                // Pretty format server errors
                config.entry.wsserver.unshift(
                  require.resolve('razzle-dev-utils/prettyNodeErrors')
                );
                config.plugins.push(
                    new StartServerPlugin(
                        Object.assign(options.startServerOptions, {
                            entryName: 'wsserver'
                        })
                    )
                );
            }

        }
        return config;
    },
};

[silviubogan]

Thanks a lot! But I get:

[silviubogan]

I've changed the push statement into:

config.plugins.push(
  new StartServerPlugin(
    Object.assign(options.startServerOptions, {
      entryName: 'wsserver',
      verbose: true,
      nodeArgs: [],
      killOnExist: true,
      killOnError: true,
    })
  )
);

but I still get:

which is code from the main HTTP server.

[fivethreeo]

Ws server is on port?

[silviubogan]

8080

[fivethreeo]

Hm, it may be startserver plugin is not thread safe.

[fivethreeo]

Would have to see the project to debug this.

[silviubogan]

I don't have experience with thread safety. Is there something I can do about it? Is there a walk-around to this? From where should I start? Thanks!

[silviubogan]

Would have to see the project to debug this.

Hopefully I will post tomorrow more of my code. Thanks.

[silviubogan]

@fivethreeo I managed to isolate the issue in a very small project by removing huge chunks of code step by step: https://github.com/silviubogan/reduced-test-case-29.07.2021. Good night!

[fivethreeo]

Use razzle-start-server-webpack-plugin

[silviubogan]

Now I get

Error: Cannot find module 'src/ws.js'

because of this line:

config.entry.wsserver = ['src/ws.js'];

[silviubogan]

To solve this small issue I only had to replace

config.entry.wsserver = ['src/server/ws.tsx'];

with

config.entry.wsserver = ['./src/server/ws.tsx'];

[fivethreeo]

If the module does not update/restart you can set signal: 'SIGTERM' in options