Railway•15mo ago

PERN Application with React Router -- WebSocket connection to 'xxx' failed:

I read a previous thread where it was suggested to use serve when running the client in production mode, but this solution does not work with React Router in my understanding. Could it be as simple as changing my client start script? This is my first time hosting an application. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

Solution:

simply follow this guide https://help.railway.app/project-help/f9v3gkPQRy4UShk5SnoPDH/getting-your-create-react-app-running-on-railway/qHRsgxa5n57xLp1yVgk9fP...

Jump to solution

24 Replies

Percy•15mo ago

Project ID: 3bf7a56e-38fc-403a-92fa-0dcccfe80e97

pawtang•15mo ago

3bf7a56e-38fc-403a-92fa-0dcccfe80e97

Brody•15mo ago

react router is client side right?

pawtang•15mo ago

Yessir server scripts: "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "nodemon index.js &", "run dev": "nodemon index.js" },

Brody•15mo ago

does react router require the server to redirect all requests to index.html?

pawtang•15mo ago

I'm all ears What's bad here

Brody•15mo ago

pawtang•15mo ago

I don't think so? index.html is in the client side and only contains some metadata and the root for injecting the react build

Brody•15mo ago

is your react app a spa app?

pawtang•15mo ago

const App = () => {
  return (
    <>
      <ToastManager />
      {/* <ToastManager toastStack={toastStack} /> */}
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="signup" element={<Signup />} />
        <Route path="login" element={<Login />} />
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="suppliers" element={<ManagerSuppliers />} />
        <Route path="materials" element={<ManagerMaterials />} />
        <Route path="transactions" element={<ManagerTransactions />} />
      </Routes>
    </>
  );
};

ReactDOM.render(
  <BrowserRouter>
    <ToastProvider>
      <UserProvider>
        <App />
      </UserProvider>
    </ToastProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

const App = () => {
  return (
    <>
      <ToastManager />
      {/* <ToastManager toastStack={toastStack} /> */}
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="signup" element={<Signup />} />
        <Route path="login" element={<Login />} />
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="suppliers" element={<ManagerSuppliers />} />
        <Route path="materials" element={<ManagerMaterials />} />
        <Route path="transactions" element={<ManagerTransactions />} />
      </Routes>
    </>
  );
};

ReactDOM.render(
  <BrowserRouter>
    <ToastProvider>
      <UserProvider>
        <App />
      </UserProvider>
    </ToastProvider>
  </BrowserRouter>,
  document.getElementById("root")
);

Bear with me I'm honestly quite stupid. I don't know if it counts as a SPA if it's technically rendering all of this content in the single html page "index.html" or if the inclusion of a router that builds URLs dynamically means its not a SPA

Brody•15mo ago

is there only one .html file named index.html in the build folder?

pawtang•15mo ago

Yes

Brody•15mo ago

then its a single page app

Solution

Brody•15mo ago

simply follow this guide https://help.railway.app/project-help/f9v3gkPQRy4UShk5SnoPDH/getting-your-create-react-app-running-on-railway/qHRsgxa5n57xLp1yVgk9fP

pawtang•15mo ago

Awesome 🙂 thanks again for the support.

Brody•15mo ago

let me know if you need any clarification

pawtang•15mo ago

I'll give it a shot now Oh, serve should be installed in client folder yeah? or does it matter vs global

Brody•15mo ago

it looks like you have modified your scripts quite a bit, please go back to the default start scripts before you start that guide should be installed as a project dependency and that is what npm i serve will do

pawtang•15mo ago

Nice, I'm online, no web socket errors, client and server are happy. thanks.

Brody•15mo ago

sanity check, can you show me your current scripts?

pawtang•15mo ago

"scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "node index.js", "run dev": "nodemon index.js" }, "scripts": { "dev": "react-scripts start", "start": "serve build -s -n -L -p $PORT", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },

Brody•15mo ago

why did you send two

pawtang•15mo ago

First was server. Irrelevant

Brody•15mo ago

ahhh okay all looks good to me!

Gaming

Programming

PERN Application with React Router -- WebSocket connection to 'xxx' failed: