I have deployed my simple React app to Heroku - https://projectslist.herokuapp.com It works just fine except for the server part which doesn't work at all. I've seen the logs and it says that my only server method - /sendmail - returns error 404. How can i fix this problem? I suppose that I should edit something in package.json file but I'm not sure what I should change.
Here's my github repo - https://github.com/VasVV/Projects-list
Try putting your server files in the root directory folder and everything else in a client folder within the root:
1.) Put your server.js into the root directory
2.) Add these commands to your root package.json...
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"proxy": "http://localhost:4242/"
3.) Create a client folder and put your src and public folders in it.
4.) Add these commands to your client folders package.json...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Your file structure from root should look like this:
Root
client
Public
Src
package.json
server.js
package.json
5.) Move all your server-related stuff into the root folder, that way, you don't have to cd into any nested folders.
Add a Procfile to your root folder that says something like:
web: node server/index.js -port 8000
And a small addition to the scripts part of your package.json that tells Heroku that once it's fetched all the dependencies for your project it should build it, although that may not be necessary now.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
Related
Failed to migrate: buildpacks from Heroku to Nixpacks
I need help I can't do the migration of my front end projects it doesn't compile and gives an error.
My Heroku buildpacks:
This script works correctly to generate the application on Heroku and Vercel, but I can't install it with the Nixpacks package. Can someone tell me what is wrong with the scripts?
"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"compile:scss": "node-sass src/assets/scss/light-bootstrap-dashboard-react.scss src/assets/css/light-bootstrap-dashboard-react.css",
"minify:scss": "node-sass src/assets/scss/light-bootstrap-dashboard-react.scss src/assets/css/light-bootstrap-dashboard-react.min.css --output-style compressed",
"map:scss": "node-sass src/assets/scss/light-bootstrap-dashboard-react.scss src/assets/css/light-bootstrap-dashboard-react.css --source-map true",
"build:scss": "npm run compile:scss && npm run minify:scss && npm run map:scss"
},
Error:
Using Nixpacks
Nixpacks build failed
If someone could help me, so as not to leave the railway.
The Heroku buildpacks are finally leaving Railway forever on Novermber 14th.
Moving From Heroku to Railway
I really appreciate any help, I'm new to this type of development
In railway settings>general>root directory> name of the directory where you do mpn start
&&
package.json>"scripts">"start": "nodemon src/app.js"
I cannot deploy my react project on github pages because the change that I did in my package json shows the error below:
I just added inside of Scripts: publicar
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"publicar": "npm run build && ./node_modules/bin/gh-pages -d build"
},
I'm using '.' because i need to access the node_modules that is located in a different place that my package json.
When I execute the command 'npm run publicar' shows me this error:
'.' is not recognized as a internal command
When I execute the 'npm run publicar' should not show me errors and should show 'published'
npm runs with node_modules/bin in its PATH. You should just be able to use gh-pages the same way you use react-scripts.
I would also advise using a pre-script instead of chaining commands
"prepublicar": "npm run build",
"publicar": "gh-pages -d build"
My react app's environment variables still returns undefined after trying to prepend "REACT_APP_" in my variable. I'm using create-react-app, and I see a lot of the prepending of "REACT_APP_" as the common solution for this, but it doesn't work for me.
.env:
REACT_APP_UNSPLASH_KEY=my_api_key
REACT_APP_OWM_KEY=my_api_key
In my App.js:
const get_random_photo = () =>
`https://api.unsplash.com/photos/random/?orientation=landscape&w=1920&h=1080&query=${weather_query}&client_id=${process.env.REACT_APP_UNSPLASH_KEY}`;
const get_weather = () =>
`https://api.openweathermap.org/data/2.5/weather?q=${location}&units=metric&appid=${process.env.REACT_APP_OMW_KEY}`;
I also tried installing env-cmd, separating .env into a .env.production and .env.development, and editing scripts for package.json:
"scripts": {
"preinstall": "npx npm-force-resolutions",
"start:staging": "env-cmd -f .env react-scripts start",
"start:prod": "env-cmd -f .env react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And still no luck.
If your .env files are named as .env.production and .env.development you are not using them in the package.json scripts.
It should be like env-cmd -f .env.development react-scripts start and your production build can be env-cmd -f .env.production react-scripts build
App is consist of Node.js and React. There is no database. Heroku local web works fine but deployment doesn't work properly. Deployment just has index.html. In short words, node and react doesn't work properly on deployment.
backend package.json
"engines": {
"node": "15.4.0",
"npm": "7.20.5"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app.js",
"heroku-postbuild": "cd frontend && npm install && npm run build"
}
frontend package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
app.js
app.use(express.static(path.join(__dirname, './frontend/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname+'/frontend/build/index.html'));
});
const PORT = process.env.PORT || 5000;
Procfile
web: node app.js
Everything is fine with the heroku local web code as above. But on deployment I met error like this:
error I got
Stopping all processes with SIGTERM
heroku[web.1]: Process exited with status 143
I tried some solutions in here. But I couldn't solve.
I can write more information as needed. Thanks!
Add these to your frontend package.json scripts :
"devStart": "react-scripts start",
"start": "serve -s build",
....
"heroku-postbuild": "npm run build"
In my package.json I have run scripts that look like:
"scripts": {
"build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
"start": "npm run build:style && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm using this tailwindcss framework for CSS, and it uses PostCSS to update the CSS.
Currently if I update my CSS npm doesn't run the build, so my CSS changes are not visible until I stop and re-rerun:
npm run start
Is there a way for npm to watch the CSS files, and when changed also run the build:style command?
Unfortunately, I don't believe Tailwinds has a 'watch' feature. I believe one workaround would be to install the watch package.
npm install watch
You have a lot of scripts going on and without knowing how you've integrated PostCSS and the likes, it's tough to know exactly what to do. One option would be to create a new script that takes advantage of the new watch node package.
"scripts": {
"build:style":"tailwind build src/styles/index.css -o src/styles/tailwind.css",
"start": "npm run build:style && react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "watch 'npm run start'"
},
If that doesn't work, check out the blog below. It uses the same methodology, but may have insight that could help you figure it out!
https://flaviocopes.com/tailwind-setup/