Railway•2y 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•2y ago

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

pawtangOP•2y ago

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

Brody•2y ago

react router is client side right?

pawtangOP•2y ago

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

Brody•2y ago

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

pawtangOP•2y ago

I'm all ears What's bad here

Brody•2y ago

pawtangOP•2y 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•2y ago

is your react app a spa app?

pawtangOP•2y 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•2y ago

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

pawtangOP•2y ago

Yes

Brody•2y ago

then its a single page app

Solution

Brody•2y ago

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

pawtangOP•2y ago

Awesome 🙂 thanks again for the support.

Brody•2y ago

let me know if you need any clarification

pawtangOP•2y ago

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

Brody•2y 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

pawtangOP•2y ago

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

Brody•2y ago

sanity check, can you show me your current scripts?

pawtangOP•2y 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•2y ago

why did you send two

pawtangOP•2y ago

First was server. Irrelevant

Brody•2y ago

ahhh okay all looks good to me!

Gaming

Programming

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