I'm trying to deploy MERN stack app to Heroku, everything works fine except the landing page.
I tried every single solution I can but nothing worked.
Here is my app landing page, it displays blue screen with a button up top, if try to navigate to different routes like /contact or /plans it works fine.
I checked the logs and network requests everything is okay 200 status.
I tested the app on my machine and it worked as expected.
On Heroku it displays blue screen
Here is my server.js code
// Serve Static assests if in production
if (process.env.NODE_ENV === 'production') {
//set Static folder
app.use(express.static('frontUI/client/build'));
app.get('*', (req, res) => {
res.sendFile(
path.resolve(__dirname, 'frontUI', 'client', 'build', 'index.html')
);
});
}
here is my script
"scripts": {
"client-install": "npm install --prefix frontUI/client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix frontUI/client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix frontUI/client && npm run build --prefix frontUI/client"
},
My landing page route
<Route
exact
path="/"
render={matchProps => (
<WithLayout
{...matchProps}
component={ServicesView}
layout={MainLayout}
/>
)}
/>
Related
The client-side is build with create-react-app and the backend is with the express, node.js, and MongoDB. It works locally, but when I deploy to Heroku just the backend works...
index.js
app.use(express.static(path.join(__dirname, 'client', 'build')));
+app.get('/', function(req, res) {
-app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'));
});
});
}
package.json in the server side
"scripts": {
"start": "node index.js",
"heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
},
package.json in the client side
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000",
also, my mongoose on MongoLab works fine and add it to Heroku
BTW, when I push to Heroku it seems everything works fine. I mean it navigates to client-side and installs and build the package
moved the app.use(express.static(path.join(__dirname, 'client', 'build'))); before the app.use(error) and error handlign function then it works
I'm setting up a webapp in next.js that runs in parallel with a node express server which does some middleware work to interface with an API server.
I have everything working however I don't know how to make it all work together when making a npm run start. The only way it works is with a "node server.js" in one terminal and a "npm run start" in another.
I've tried to add a package.json script like this:
"start-server": "next start && node server.js"
but it only starts the next.js instance, and if I reverse the order then it only starts the node instance.
How do I make them both work so I can deploy this project?
Also since Next is a server-side package, you can build the next app to use your server.js code before deploying the server.
like so:
/* eslint-disable no-undef */
const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const options = {
...
};
app.prepare().then(() => {
const server = express();
server.get('*', (req, res) => {
return handle(req, res);
});
server.listen('8700', err => {
if (err) throw err;
console.log(`> Ready on Port 8700`);
});
});
Install Concurrently npm package to your node dependencies.
npm install concurrently
Add the following scripts to node server's package.json
"frontend-install": "npm install --prefix frontend",
"start": "node server.js",
"server": "nodemon server.js",
"frontend": "cd ./frontend && npm run start",
"dev": "concurrently \"npm run server\" \"npm run frontend\""
i am assuming that your next application is in a folder/directory called "frontend".
3. Add the following code to package.json of the nextjs application.
"proxy": "http://localhost:5000"
Now npm run start command to start node server and nextjs app together.
So I am trying to make my first react app. I have it working just fine locally. The problem is that I cannot upload my project to Heroku.
This is my app setup:
my file arrangement. I built this starting with a create-react-app, wrapped that entire thing in a "client" folder, and created a normal node server arrangement outside. I haven't touched my react app's package.json" except to add a socketio dependency, other than that it is exactly what create-react-app spits out.
I get this error on console when attempting to upload:
"sh: 1: react-scripts: Permission denied"
I have gone through https://devcenter.heroku.com/articles/nodejs-support, but to no avail.
This is my "outside" package.json scripts and dependencies
"scripts": {
"client": "npm start --prefix client",
"server": "node server.js",
"start": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "cd client && npm run build"
},
"dependencies": {
"concurrently": "^4.0.1",
"express": "^4.16.4"
"socket.io": "^2.1.1"
}
UPDATE:
I've not gotten my application to work yet HOWEVER I finally found something interesting.
This: https://github.com/mars/heroku-cra-node
Looks like a barebones application I can essentially my stuff to, and have it work on Heroku. I've not added my code yet, I'll report back.
UPDATE:
Yep, seems to get past this permission BS. Now I just have to deal with getting socket.io client to connect... -_-
Change your script to this:
"scripts": {
"start": "node index.js",
"server": "nodemon index.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_PRODUCTION=false npm install --prefix client && npm run build --prefix client",
},
npm run dev will start your server and client in development mode...
You can also install nodemon to make your life easier...
hi i have a nodejs and reactjs application in my local , developed the application from a boiler plate code , in boiler plate code package.json i have these following scripts
"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"
}
as of i know it can be deployed on heroku with these scripts , can i use same scripts to deploy on azure , do i need to change anything here .
// Serve static assets if in production
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server started on port ${port}`));
and this is what i have in my server.js as a starting point. i don't have any config folder to diff environments.for an example
// i don't have this folder structure and am not using webpack
-- config
|-- dev.json
|-- prod.json
can some one suggest , what is the best way to deploy it , or can i use same post-build script by changing it key like azure-postbuild
edited : i think i should use postinstall instead of heroku-postbuild
I finished a small canvas based game and I would like to upload it to the web via Heroku.
All the code is written at the Src directory and I bundle it to the dist directory via Webpack. I then use a simple express server to serve the static files.
This is all there is to it:
On development mode this works just fine. However, when I upload to Heroku I get "Cannot GET /".
I tried several option to make this work but for some reason I'm not able to fix this.
I did try to write this as well:
app.get('/', (req, res) => {
res.sendFile('index.html');
}
or some variation of this but to no avail.
This is the scripts part of my package.json:
"scripts": {
"start": "node server.js",
"dev": "webpack --watch",
"prod": "webpack --config webpack.production.config.js -p"
}
When I run on development I use "npm install" followed by "npm run prod" to bundle to 'dist' and then "npm start".
What am I missing here?
Thanks!