I'm building a full stack app using MongoDB, Express, React, and Node. I've worked on projects with only front-end programming and I've worked on projects with only back-end programming. I used ejs to create views for Express, so I'm not sure how it would work with front-end views created through React. Also, I'm not sure how the CRUD operations would be used with React. I have very vague ideas.
What I know is that in package.json, the two are combined together when running the program. That's about it. Even with that I'm unsure. My question is: How does Express interact with React?
The kind of answers I'm looking for involve connections. Where and how does it click together? If React creates views, then how is Express connected to those views? Am I importing files? Am I writing ExpressJS inside React components? How does it display data onto the view from a database? Is app.get('/',...) enough? How does Express know which files to use when posting that data?
Simple way to connect react with express add proxy in json File.
{
"name": "create-react-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"husky": "^0.14.3",
"lint-staged": "^7.0.0",
"prettier": "^1.11.0",
"react-scripts": "^1.0.17"
},
"dependencies": {
"bootstrap": "^4.1.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"sanitize.css": "^5.0.0",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"precommit": "lint-staged"
},
"proxy": "http://localhost:3000/",
"lint-staged": {
"*.{js,json,css,md}": [
"prettier --write",
"git add"
]
}
}
Related
I'm working on a nextjs webapp, it's a static website built with Chakra UI. Everything was working quite good till now but suddenly my productions stopped building. It is showing building forever. I'm deploying it on the Vercel but the same issue is arising there as well.
My previous deploymnt is live at https://siws.vercel.app and it's working fine but I'm not able to push another deployment due to this issue. And I don't even know the root cause of this.
I even tried deleting the ./next folder and building again but the facing the same issue.
Here is some information that maybe relevant:
Node JS version: 19.1.0
And here is my package.json file:
"name": "slayitwithskin",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#chakra-ui/react": "^2.4.1",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#splidejs/react-splide": "^0.7.12",
"eslint": "8.27.0",
"eslint-config-next": "13.0.3",
"framer-motion": "^7.6.6",
"next": "13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.6.0",
"react-rainbow-components": "^1.31.0",
"sass": "^1.56.1"
}
}
Any sort of help is really appreciated.
I checked my package.json file, I was using react-rainbow-components which was the root cause of this issue. I completely removed and the app is now building quickly.
I just started learning about concurrently npm to React.
I want to know how to deploy React project on Github page with concurrently npm.
Normally on local machine we would run the app with server side package.json file
"dev": "concurrently "npm run server" "npm run client""
In Terminal> npm run dev
I tried with gh-pages npm to deploy react app on Github page but with concurrently npm,
I have no idea how to do it since there are two package.json.
Also, I don't know much about NODE environment and npm run build.
Server side package.json:
{
"name": "contact-keeper",
"version": "1.0.0",
"description": "Contact manager app",
"main": "server.js",
"homepage": "https://myprofile.github.io/Contact-Keeper-with-React",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"config": "^3.1.0",
"dotenv": "^8.0.0",
"express": "^4.17.1",
"express-validator": "^6.1.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.6.4"
},
"devDependencies": {
"concurrently": "^4.1.1",
"gh-pages": "^2.1.1",
"nodemon": "^1.19.1"
}
}
Client side server package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-transition-group": "^4.2.1",
"uuid": "^3.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}
Is there any document or basic knowledge about setting environment that I need to learn more to understand this topic?
Github is not (quite) a service for serving your working application to other users. Github is a repository for storing your code, updating it, and managing versions.
I think that to deploy your app "concurrently" to github means there is a way of updating Github with the new version code, at the same time as you deploy it online to a service, such as Heroku.
You should research and understand what Git (as opposed to github) is, as its essential for development. Get skilled at managing your app code with git first, before trying to deploy to a service like Heroku, AWS etc....
EDIT
As pointed out by Asaf Aviv, you can serve front-end apps from Github, with github pages, but you still need to be able to push your local code up to github for this to work.
I am running react app in the nginx server by dockerizing it.
{
"name": "react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.0.0-alpha.6",
"react": "^16.2.0",
"react-axios": "^2.0.0",
"react-dom": "^16.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build-window": "react-scripts build && del ../server/dist && move build ../server/dist",
"build-linux": "react-scripts build && rm -rf ../server/dist && mv build ../server/dist",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"homepage": "/myapp/"
}
if i dont put homepage entry i am able to run locally but in the ngInx server, css and js files are giving 404.
below is the path it is taking without context path in ngInx server for css https://XXXXXXXXXXXXXXXX/static/css/main.9a46c0ad.css
If i put homepage entry , i am getting "Uncaught SyntaxError: Unexpected token <" error . But in the network tab i see all the js and css files are loading properly..
Can you please help me, which area i have to concentrate to resolve this issue
Don't put your context root in the package.json. When you build the app you can give the the base-href in your build script. Add --base-href=/myapp/ in your build script. This will add the base href in your index.html
I'm trying to deploy a 'create-react-app' project to Heroku. I used the Heroku Create-React-App boilerplate and followed another tutorial on setting up a backend api for connecting to my custom server.js file.
When I deploy to Heroku, the build runs fine but my app still will not connect to my server.js file.
I assume this is either because the proxy property in my package.json is supposed to point to the same port defined in my server.js file (which Heroku would assign automatically, which I don't know how to check) or perhaps my server.js file isn't running at all.
Been having a very hard time finding any resources that properly explain how to deploy a 'create-react-app' with a custom back-end (server.js).
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "https://localhost:5000",
"dependencies": {
"axios": "^0.17.1",
"body-parser": "^1.18.2",
"md5": "^2.2.1",
"mongodb": "^3.0.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2"
},
"scripts": {
"start": "react-scripts start",
"start:server":"node server.js",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Line in server.js where I set the port:
const port = process.env.PORT || 5000;
I was able to deploy my app to Heroku by following this tutorial from fullstackreact.com and studying the accompanying repo.
Basically, I needed to bundle my client-side code and then make sure my server.js file was serving that bundle as a static file. I'm sure there's other ways to go about this, like running concurrent scripts for the webpack-dev-server and the backend api (server.js), but this worked for me without much headaches.
Here I am having a little addiction problem with reaction-native since yesterday................
it completely blocks me from navigating to certain screens etc.
Here is a copy of package. json:
{
"name": "test2",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.7.0",
"jest-expo": "^22.0.0",
"react-test-renderer": "16.0.0-beta.5"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^22.0.2",
"mobx-react": "^4.3.4",
"react": "16.0.0-beta.5",
"react-native": "^0.49.5",
"react-native-elements": "^0.18.2",
"react-native-keyboard-aware-scroll-view": "^0.4.1",
"react-native-router-flux": "4.0.0-beta.23",
"react-navigation": "^1.0.0-beta.19"
}
}
How to install these outbuildings?
Where can I fix my problem if you've already had it, see?
thx!
You haven't installed the dependencies in your app. Either running
npm install
Has produced errors for those npm libraries, or it simply hasn't been run. Try running it, and if it still doesn't work, take a look at the contents of ./npm-debug.log for error messages related to it.
ETA: Looking closer, it seems that several of your dependencies require peers of specific versions of react, but you have a different version of react installed.
Are you using react#16.0.0-beta for a specific reason? Things like mobx are looking for react 13/14/15/16, but not 16b. I'd try this:
npm remove -S react
npm install -S react
and see if that works. If you were using the React beta for a reason, you may struggle to get these to talk to each other.