I am looking to retain all current features of express server while adding a way to test my asynchronous validation in server.js . More explanation below
I created react/redux setup using create-react-app (just initial) setup and by default the server runs at http://localhost:3000 , I am looking to work on Asynchronous validations.
I tried editing package.json file to use the server.js file I created so I changed
From `"start": "react-scripts start"`
TO `"start": "node server.js",`
But this disables hot reloading feature
Content of package.json
{
"name": "signup",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.5",
"redux": "^3.7.0",
"redux-thunk": "^2.2.0",
"react-scripts": "1.1.1",
"body-parser": "^1.18.2",
"express": "^4.16.2"
},
"scripts": {
"start": "node server.js",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Related
I am running the front end and backend concurrently when i post a request from axios it will give this error in my users and then register. My Package.json file is this in which i had added the proxy server.Kindly help me out
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"classnames": "^2.2.5",
"http-proxy-middleware": "^2.0.3",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
im trying to deploy MERN stack application to heroku , but am having some issues doing so. Wheneve i try to deploy it gives me this error saying Expected another key value pair at line 32 column 1 can someone please explain what this means and how i can fix it ? Thanks !!
{
"name": "axios-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"cors": "^2.8.4",
"google-map-react": "^1.0.4",
"google-maps-react": "^2.0.2",
"node": "^10.12.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-geolocated": "^2.4.0",
"react-geolocation": "^1.0.3",
"react-google-maps": "^9.4.5",
"react-places-autocomplete": "^7.1.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^1.1.4",
"react-star-rating": "^1.4.2"
},
"scripts": {
"start": "react-scripts start",
"start-js": "react-scripts",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000/",
}
Remove the last comma, at the end of the "proxy" line. Like this:
{
"name": "axios-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"cors": "^2.8.4",
"google-map-react": "^1.0.4",
"google-maps-react": "^2.0.2",
"node": "^10.12.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-geolocated": "^2.4.0",
"react-geolocation": "^1.0.3",
"react-google-maps": "^9.4.5",
"react-places-autocomplete": "^7.1.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "^1.1.4",
"react-star-rating": "^1.4.2"
},
"scripts": {
"start": "react-scripts start",
"start-js": "react-scripts",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000/"
}
Whenever you specify a comma in a json it expects a key value pair afterwards, which explains the error
I have a create-react-app project which proxies a node express server at port 5000.
When we deploy it locally, all the requests get routed from client to the backend server and intermediate pages get rendered properly.
However, when I deploy it to Heroku, the flow always has to start from / route as any other URL directly hits the express server instead of being routed from front end.
Eg: https://consumesafe-dev.herokuapp.com works
But https://consumesafe-dev.herokuapp.com/dashboard goes directly to the node server instead of being proxied from front end.
here is the package.json for server:
{
"name": "example-create-react-app-express",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"test": "cd client && npm install && yarn test",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"#google-cloud/language": "^1.0.0",
"#google-cloud/vision": "^0.12.0",
"async": "^2.6.0",
"body-parser": "~1.4.2",
"express": "^4.16.2",
"google-cloud": "^0.57.0",
"https": "^1.0.0",
"method-override": "~2.0.2",
"nodemon": "^1.17.3",
"pg": "^7.4.1",
"request": "^2.83.0",
"sequelize": "^4.37.2",
"winston": "^2.4.1"
},
"devDependencies": {
"concurrently": "^3.5.1"
}
}
and the package.json from client:
{
"name": "example-create-react-app-express",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000/",
"dependencies": {
"bootstrap": "^3.3.7",
"firebase": "^3.6.1",
"material-ui": "^0.20.0",
"react": "^16.2.0",
"react-checkbox-group": "^4.0.1",
"react-dom": "^16.2.0",
"react-event-timeline": "^1.5.1",
"react-notification-system": "^0.2.17",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I have a node app and a create-react-app nested within. Within the development environment, I use concurrently to run two servers, one for the express side, one of the react side.
localhost:5000 for the node/express side
localhost:3000 for the React side
At the the moment, I have a sign up page http://localhost:3000/signup and when the user presses the 'Sign Up' button, it makes a POST request to /signup.
I want it so that only the POST request for /signup is proxied to localhost:5000 and not the GET request (which is the view page for the sign up form).
How do I do this?
package.json (in create-react-app):
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": {
"/signup": {
"target": "http://localhost:5000"
}
},
"dependencies": {
"axios": "^0.16.2",
"lodash": "^4.17.4",
"materialize-css": "^0.100.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.14",
"redux": "^3.7.2",
"redux-form": "^7.0.4",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Rest of code: https://github.com/drhectapus/Voting-App
I was looking for an option to do the same but with no luck but I found another solution by including a simple configuration in my webpack.
Being more specific the part where I setup the devServer
devServer: {
...
proxy: {
'/signup': 'http://localhost:5000'
}
}
Hope it helps to somebody who stucks here too.
I had a demo here.
Regards.
I created "create-react-app" in a subfolder called client. My package.json has to be in the root directory though (heroku).
This is the structure:
- app
- client
- node_modules
- index.js
- components
- ...
- package.json
- Procfile
This is my package.json file:
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001/",
"devDependencies": {
"react-scripts": "0.6.1"
},
"dependencies": {
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"firebase": "^3.4.1",
"jquery": "^3.1.1",
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
How to tell package.json to look for the app in the client subfolder and build it there?
You can set your NODE_PATH environment variable like this:
export NODE_PATH=path/to/app/node_modules
You can find more information about it in the official docs:
https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders