As a newcomer to the world of web development, I'm facing a seemingly simple issue that is consuming much of my time.
I have set up an express server to run React on the front end. To achieve this, I use webpack and bundle to parse my react app, and then load the output files using express static from the public directory.
This setup allows me to render the HTML document at the root path ('/'). However, things start getting complicated when I attempt to integrate react-router with express router. After researching possible solutions, I came across the advice to create an express route like the following:
/* This excerpt shows the current code in my project */
router.get('/*', (req, res, next) =>{
res.sendFile(require('../public/index.html'))
})
By calling React through the script tag inside the HTML file, this code triggers React to handle the URL and render its own components.
Nevertheless, whenever I try to access any path in the browser, I encounter a rather straightforward error message: SyntaxError.
C:\Users\Matthew\Desktop\Proyectos\Apid0\src\public\index.html:1
<!DOCTYPE html>
^
SyntaxError: Unexpected token '<'
at wrapSafe (internal/modules/cjs/loader.js:1067:16)
at Module._compile (internal/modules/cjs/loader.js:1115:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
at Module.load (internal/modules/cjs/loader.js:1000:32)
at Function.Module._load (internal/modules/cjs/loader.js:899:14)
at Module.require (internal/modules/cjs/loader.js:1040:19)
at require (internal/modules/cjs/helpers.js:72:18)
at C:\Users\Matthew\Desktop\Proyectos\Apid0\src\routes\index.js:5:18
at Layer.handle [as handle_request]
(C:\Users\Matthew\Desktop\Proyectos\Apid0\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\Matthew\Desktop\Proyectos\Apid0\node_modules\express\lib\router\route.js:137:13)
If anyone has insights or suggestions on how to tackle this challenge, your help would be greatly appreciated.