How to: Adonis WebSocket server + client with Vue CLI 3

#1

Hi!

Since I have had trouble two times figuring out how to use AdonisJS WS client with Vue CLI 3.x scaffolded Vue project I thought will write it in here (in case I forget it again or someone else has similar trouble)

It is required that you have Adonis WS server running already. Setting it up is quite easy: https://adonisjs.com/docs/4.1/websocket#_setup

Adonis WS client doc states that it relies on regenerator-runtime. Luckily for us Vue CLI 3.x already requires it, so there is no need to install it separately.

Since packages won’t get transpiled by default it is required to add it into transpileDependencies array in Vue config

// vue.config.js
module.exports = {
  transpileDependencies: [
    '@adonisjs/websocket-client/index'
  ]
}

Notice that in transpileDependencies there is /index in the end. Without it Ws.browser.js get’s loaded in and it seems to be not transpiled.

Also when importing Ws inside component it is needed to add /index in the end in import statement too

import Ws from '@adonisjs/websocket-client/index'

Everything else goes exactly according to Adonis WS client doc. Important part is this missing /index

For some reason adding @adonisjs/websocket-client to transpileDependencies and importing without /index did not work for me

3 Likes

Adonis is not defined - Trouble with React/Cordova App
#2

In my case, should i transpile it with babel or webpack ?

0 Likes

#3

Never done something like this with React myself, but here seems to be working solution: https://stackoverflow.com/a/44814538 (when using create-react-app)

I am not sure you can transpile anything with webpack. Webpack is module bundler and Babel is something like code compiler.
Compile it thro Babel and let Webpack bundle it all together

0 Likes