R
Railwayβ€’2y ago
pawtang

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" },
24 Replies
Percy
Percyβ€’2y ago
Project ID: 3bf7a56e-38fc-403a-92fa-0dcccfe80e97
pawtang
pawtangβ€’2y ago
3bf7a56e-38fc-403a-92fa-0dcccfe80e97
Brody
Brodyβ€’2y ago
react router is client side right?
pawtang
pawtangβ€’2y ago
Yessir server scripts: "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "nodemon index.js &", "run dev": "nodemon index.js" },
Brody
Brodyβ€’2y ago
does react router require the server to redirect all requests to index.html?
pawtang
pawtangβ€’2y ago
I'm all ears What's bad here
Brody
Brodyβ€’2y ago
^
pawtang
pawtangβ€’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
Brodyβ€’2y ago
is your react app a spa app?
pawtang
pawtangβ€’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
Brodyβ€’2y ago
is there only one .html file named index.html in the build folder?
pawtang
pawtangβ€’2y ago
Yes
Brody
Brodyβ€’2y ago
then its a single page app
pawtang
pawtangβ€’2y ago
Awesome πŸ™‚ thanks again for the support.
Brody
Brodyβ€’2y ago
let me know if you need any clarification
pawtang
pawtangβ€’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
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
pawtang
pawtangβ€’2y ago
Nice, I'm online, no web socket errors, client and server are happy. thanks.
Brody
Brodyβ€’2y ago
sanity check, can you show me your current scripts?
pawtang
pawtangβ€’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
Brodyβ€’2y ago
why did you send two
pawtang
pawtangβ€’2y ago
First was server. Irrelevant
Brody
Brodyβ€’2y ago
ahhh okay all looks good to me!
Want results from more Discord servers?
Add your server