I'am trying create-react-app with express server. after setting server when I hit request I'm getting
GET http://localhost:3333/%PUBLIC_URL%/favicon.ico 400 (Bad Request)
On error preview its giving me
URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
at decodeURIComponent (<anonymous>)
at decode_param (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:172:12)
at Layer.match (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:123:27)
at matchLayer (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:574:18)
at next (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:220:15)
at jsonParser (/home/owaishanif/code/flashcard-app/node_modules/body-parser/lib/types/json.js:103:7)
at Layer.handle [as handle_request] (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/layer.js:95:5)
at trim_prefix (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:317:13)
at /home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:284:7
at Function.process_params (/home/owaishanif/code/flashcard-app/node_modules/express/lib/router/index.js:335:12)
Here is the Server Code
var express = require('express');
var bodyParser = require('body-parser');
var path = require ('path');
var data = {};
express()
.use(express.static(path.resolve(__dirname, '..', 'public')))
.use(bodyParser.json())
.get('/api/data', (req, res) => res.json(data))
.post('/api/data', (req, res) => res.json(data = req.body))
.get('*', (req, res) => res.sendFile( path.resolve( __dirname, '..', 'public/index.html')))
.listen(3333, function(){
console.log('server running at 3333');
});
I want to use create react app with server. There are articles online but they are outdated. Help tips and tricks are welcome.
I have solved this using create-react-app
build
which creates a build folder. also %public_url%
string is replaced by some yarn scripts behind the scenes. So we cant directly serve that folder. Instead we have to generate using build
.
Use yarn build
or npm run build
. That will generate a build folder containing asset
, manifest
, and other files.
After that, use that build folder to statically serve your files for production use.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With