1 reply

Migrate react-scripts to vite

I have a project using react-scripts 4 with a proxy-dev-server needed to start the app where I have:

const express = require('express')
const app = express()
const { createProxyMiddleware } = require('http-proxy-middleware')
const fs = require('fs')
require('dotenv').config()

const wsProxy = createProxyMiddleware({
  changeOrigin: true,
  target: 'http://localhost:3000',
  ws: true
})

app.use(
  '/api/v2',
  createProxyMiddleware({
    secure: true,
    changeOrigin: true,
    target: {
      protocol: 'https:',
      host: '127.0.0.1',
      port: 8443,
      pfx: fs.readFileSync(process.env.PROXY_CERT_PATH),
      passphrase: process.env.PROXY_CERT_PASSPHRASE
    }
  })
)

app.use('/sockjs-node', wsProxy)

app.use(
  '/',
  createProxyMiddleware({
    changeOrigin: true,
    target: 'http://localhost:3000'
  })
)

const server = app.listen(3001)

server.on('upgrade', wsProxy.upgrade)

const express = require('express')
const app = express()
const { createProxyMiddleware } = require('http-proxy-middleware')
const fs = require('fs')
require('dotenv').config()

const wsProxy = createProxyMiddleware({
  changeOrigin: true,
  target: 'http://localhost:3000',
  ws: true
})

app.use(
  '/api/v2',
  createProxyMiddleware({
    secure: true,
    changeOrigin: true,
    target: {
      protocol: 'https:',
      host: '127.0.0.1',
      port: 8443,
      pfx: fs.readFileSync(process.env.PROXY_CERT_PATH),
      passphrase: process.env.PROXY_CERT_PASSPHRASE
    }
  })
)

app.use('/sockjs-node', wsProxy)

app.use(
  '/',
  createProxyMiddleware({
    changeOrigin: true,
    target: 'http://localhost:3000'
  })
)

const server = app.listen(3001)

server.on('upgrade', wsProxy.upgrade)

const express = require('express')
const app = express()
const { createProxyMiddleware } = require('http-proxy-middleware')
const fs = require('fs')
require('dotenv').config()

const wsProxy = createProxyMiddleware({
  changeOrigin: true,
  target: 'http://localhost:3000',
  ws: true
})

app.use(
  '/api/v2',
  createProxyMiddleware({
    secure: true,
    changeOrigin: true,
    target: {
      protocol: 'https:',
      host: '127.0.0.1',
      port: 8443,
      pfx: fs.readFileSync(process.env.PROXY_CERT_PATH),
      passphrase: process.env.PROXY_CERT_PASSPHRASE
    }
  })
)

app.use('/sockjs-node', wsProxy)

app.use(
  '/',
  createProxyMiddleware({
    changeOrigin: true,
    target: 'http://localhost:3000'
  })
)

const server = app.listen(3001)

server.on('upgrade', wsProxy.upgrade)

const express = require('express')
const app = express()
const { createProxyMiddleware } = require('http-proxy-middleware')
const fs = require('fs')
require('dotenv').config()

const wsProxy = createProxyMiddleware({
  changeOrigin: true,
  target: 'http://localhost:3000',
  ws: true
})

app.use(
  '/api/v2',
  createProxyMiddleware({
    secure: true,
    changeOrigin: true,
    target: {
      protocol: 'https:',
      host: '127.0.0.1',
      port: 8443,
      pfx: fs.readFileSync(process.env.PROXY_CERT_PATH),
      passphrase: process.env.PROXY_CERT_PASSPHRASE
    }
  })
)

app.use('/sockjs-node', wsProxy)

app.use(
  '/',
  createProxyMiddleware({
    changeOrigin: true,
    target: 'http://localhost:3000'
  })
)

const server = app.listen(3001)

server.on('upgrade', wsProxy.upgrade)

And I'm migrating the project to use vite. I have almost everything done, can start the app but can't start the session

My new vite.config.ts looks like this https://gist.github.com/FACorreiaa/3c87607cb52ee6a52d332b5b2a0875f9
And from the examples I saw I need to start my proxy and vite concurrently:

{
    "dev": "concurrently -k \"npm run proxy-dev-server\" \"npm run react:start\"",
    "proxy-dev-server": "node proxy-dev-server.js",
    "react:start": "vite --port 3000 --host 127.0.0.1",

{
    "dev": "concurrently -k \"npm run proxy-dev-server\" \"npm run react:start\"",
    "proxy-dev-server": "node proxy-dev-server.js",
    "react:start": "vite --port 3000 --host 127.0.0.1",

{
    "dev": "concurrently -k \"npm run proxy-dev-server\" \"npm run react:start\"",
    "proxy-dev-server": "node proxy-dev-server.js",
    "react:start": "vite --port 3000 --host 127.0.0.1",

{
    "dev": "concurrently -k \"npm run proxy-dev-server\" \"npm run react:start\"",
    "proxy-dev-server": "node proxy-dev-server.js",
    "react:start": "vite --port 3000 --host 127.0.0.1",

My server endpoint responds with json
https://127.0.0.1:8443/api/v2/system/status
status: "operational"

But when I try to start my session I get:

useUserSession.ts:10 
        
        
       GET http://localhost:3001/api/v2/session 404 (Not Found)

useUserSession.ts:10 
        
        
       GET http://localhost:3001/api/v2/session 404 (Not Found)

useUserSession.ts:10 
        
        
       GET http://localhost:3001/api/v2/session 404 (Not Found)

useUserSession.ts:10 
        
        
       GET http://localhost:3001/api/v2/session 404 (Not Found)

If I go back on the react-scripts configs everything works fine tho. Anyone has any clue on what I might be missing on the vite part ?

Gist

new config

new config. GitHub Gist: instantly share code, notes, and snippets.

No replies yetBe the first to reply to this messageJoin

Migrate react-scripts to vite

Similar Threads

Similar Threads

Similar Threads