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
Related
Im setting up a project with a express node.js backend and react frontend. This is my first time setting a project up with a backend and their are a few things im unsure of...
First question:
So my current folder structure is this:
--backend
--node_modules
--package-lock.json
--package.json
--server.js
--yarn.lock
--client
--node_modules
--package.json
--public
--.gitignore
--README.md
--yarn.lock
--src
--boilerplate create-react-app files
My package.json file:
BACKEND
{
"name": "yelp-clone-2-backend",
"license": "MIT",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.17.1"
},
"devDependencies": {
"concurrently": "^4.0.1"
}
}
My package.json file:
FRONT-END
{
"name": "yelp-clone-2-front-end",
"version": "0.1.0",
"license": "MIT",
"private": true,
"proxy": "http://localhost:5000/",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I am using the command from the BACKEND package.json to combine the frontend and backend server
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
The problem im having is with my current folder structure when i run this command (from the /backend dir) i get
[1] /bin/sh: line 0: cd: client: No such file or directory
error Command failed with exit code 1.
But... if i move everything out of backend and into the root dir so outside of client and not in backend folder anymore, the command works and the server starts and listens on port 5000 like expected.
Why does the command only work with the backend files in the root dir and not in the backend folder like i want.
Ive tried running the following commands with everything back inside of the backend folder before starting the server with no luck:
rm -rf node_modules
yarn cache clean
yarn
yarn start
For the cd command which fails to run, you need to understand that the npm command executes inside the backend folder. That means that if you want to change the directory to the client folder you need to append two dots before the folder: cd ../client. You tried to go to backend/client which is nonexistant.
To generate a git repository you need to run git init and not npm init.
Please understand how the cd command works before using it blindly as it could have some really bad results on a professional environment.
For any more questions reply to this answer and I can gladly edit it.
Everytime I create React app and start the development server, I get this error. HELP!!!
Per this issue, it may be a problem with the react-scripts part of your library. So either use a specific, older version of create react app by running :
npx create-react-app#4.0.1 my-app
Or by running CRA as is, then modifying your package.json folder so that the react script version is specified.
So after you run CRA, change your package.json file like so:
{
"name": "myapp",
...
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "4.0.1" // change this line to 4.0.1
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
...
}
Then make sure you rm -rf node_modules then run npm install to get a fresh install that removes whatever react-scripts came by default so that you use the specific 4.0.1 version.
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"
]
}
}
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.
I've pulled a github repository containing code for a reactjs app into one of my directories but I can't find a way to run the app on my computer. I can start a new app using create-react-app but I can't/(don't know how to) use the existing app for instead ofa freshly created one.
I'm running Ubuntu 16.04.3 on a virtual machine, my node version is 4.2.6.
I've tried sudo apt-get install --only-upgrade nodejs but it simply says my node version is already up to date. (I include this because npm start gives me a bunch of errors and tells me that it may be because I might have to update node) but the app I create with create-react-app works fine?
The error:
Package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.3.7",
"express": "^4.16.2",
"package.json": "^2.0.1",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.0.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.14",
"uuid": "^3.1.0",
"webpack": "^3.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1"
}
}
Carry out the following steps:
//Step 1:
git clone [repository url]
//Step 2:
cd [local repository]
//Step 3:
//Check package.json file and ensure scripts are notated as below:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
//Step 4:
/* Delete the node_modules folder and any 'lock' files such as
yarn.lock or package-lock.json if present.*/
//Step 5:
npm install
//Step 6:
npm start
To Note: There can be some conflict between yarn and npm when cloning from certain repositories. It's best to assume that every repo may need trimming before ultimately running npm install. I tested the above steps several times under several different factors. This is the best I have so far.
In case of issues shown after npm install, run the below to automatically fix the issues:
npm audit fix
Alternatively, use the below to see the errors:
npm audit