Socket.io как связать клиент с сервером

Задача стоит написать real-time drawing board. Теперь у меня фронт(vue.js) и бюк(на node.js) на разных серверах, пишу каждую отдельным проектом.

серверная часть:

const express = require('express')
const app = express()
const http = require('http').createServer(app)
const socketio = require('socket.io')(http, {
    cors: {
      origin: "*",
    },
  })

let connections = []

socketio.on("connection", (socket) => {
    connections.push(socket)
    console.log(`${socket.id} has connectd`)

    socket.on('draw', (data) => {
        connections.forEach(con => {
            if (con.id !== socket.id) {
                con.emit('ondraw', data)
            }
        })
    })

    socket.on('disconnect', (reason) => {
        connections = connections.filter(con => con.id !== socket.id)
    })
})

http.listen(3000, () => {
  console.log('server has been started')
})

фронт

<div class="canvas_desk">
      <canvas width="500" height="400" ref="canvas"></canvas>
    </div>
    <div class="canvas_tool">
      <div class="c_tools">
        <button @click="openChooseColor" class="tools_btn">х</button>
        <div class="choose_color" v-show="isOpenColor">
          <button @click="chooseColor(0)" style="background: #000000;"></button>
          <button @click="chooseColor(1)" style="background: #ED1C24;"></button>
          <button @click="chooseColor(2)" style="background: #FCEE21;"></button>
          <button @click="chooseColor(3)" style="background: #FF00FF;"></button>
          <button @click="chooseColor(4)" style="background: #0071BC;"></button>
          <button @click="chooseColor(5)" style="background: #2DD354;"></button>
        </div>
      </div>
      <div class="c_tools">
        <button @click="openChooseWidth" class="tools_btn"></button>
        <div class="choose_width" v-show="isOpenWidth">
          <button @click="chooseWidth(1)">1px</button>
          <button @click="chooseWidth(5)">5px</button>
          <button @click="chooseWidth(10)">10px</button>
          <button @click="chooseWidth(15)">15px</button>
        </div>
      </div>
      <!-- <div class="c_tools">
        <button @click="undoCanvas"  class="tools_btn"></button>
      </div> -->
      <div class="c_tools">
        <button @click="resetCanvas" class="tools_btn"></button>
      </div>
      <!-- <div class="c_tools">
        <button @click="socketOn" class="tools_btn"></button>
      </div> -->
      {{isConnected}}
    </div>

<script>
import io from 'socket.io-client'

export default {
  data () {
    return {
      canvas: null,
      context: null,
      isDrawing: false,
      startX: 0,
      startY: 0,
      points: [],
      pathsry: [],
      isOpenColor: false,
      isOpenWidth: false,
      colorArray: ['#000000', '#ED1C24', '#FCEE21', '#FF00FF', '#0071BC', '#2DD354', '#fffff'],
      currentColor: 0,
      currentWidth: 1,
      isConnected: false,
      socketMessage: '',
      socket: {}
    }
  },
  created () {
    this.socket = io('http://localhost:3000/')
  },
  mounted () {
    this.canvas = this.$refs.canvas
    this.context = this.canvas.getContext('2d')
    this.canvas.addEventListener('mousedown', this.mousedown)
    this.canvas.addEventListener('mousemove', this.mousemove)
    this.canvas.addEventListener('mouseup', this.mouseup)
    // this.initSocket()
  },
  methods: {
    mousedown (e) {
      const rect = this.canvas.getBoundingClientRect()
      const x = e.clentX - rect.left
      const y = e.clentY - rect.top
      this.isDrawing = true
      this.startX = x
      this.startY = y
      this.points.push({
        x: x,
        y: y
      })
    },
    mousemove (e) {
      const rect = this.canvas.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top
      if (this.isDrawing) {
        this.context.beginPath()
        this.context.moveTo(this.startX, this.startY)
        this.context.lineTo(x, y)
        this.context.lineWidth = this.currentWidth
        // this.context.globalCompositeOperation = 'source-over'
        this.context.lineCap = 'round'
        this.context.strokeStyle = this.colorArray[this.currentColor]
        this.context.stroke()
        this.startX = x
        this.startY = y
        this.points.push({
          x: x,
          y: y
        })
      }
      this.socket.emit('draw', this.points)
    },
    mouseup (e) {
      this.isDrawing = false
      this.pathsry.push(this.points)
      //   console.log(this.pathsry)
      if (this.points.length > 0) {
        localStorage.points = JSON.stringify(this.points)
      }
      this.points = []
      console.log('>>>POINTS0', this.points)
      console.log('>>>pathsry', this.pathsry)
    },
    eraseCanvas (index) {
      this.context.globalCompositeOperation = 'destination-out'
      this.currentColor = index
      this.context.strokeStyle = this.colorArray[this.currentColor]
    },
    resetCanvas () {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.pathsry = []
    },
    undoCanvas () {
      this.pathsry.splice(-1, 1)
    },
    openChooseColor () {
      this.isOpenColor = !this.isOpenColor
    },
    openChooseWidth () {
      this.isOpenWidth = !this.isOpenWidth
    },
    chooseColor (index) {
      this.currentColor = index
    },
    chooseWidth (index) {
      this.currentWidth = index
    }
  }
}
</script>

И теперь чтобы сокет работал правильно нужно добавить app.use и сделать статичным фронт. Как здесь указать фронт в моем случае? Везде поискала. Везде примеры с public, когда и сервер и клиент одним проектом.