CODEWITHSUNDEEP
node.jsreactjsherokudeploymentnetlify
Hazem
Hazem

Reputation: 141

Deploy a full stack MERN web ap to Netlify oor Heroku

I want to Deploy a full stack MERN web ap to Netlify oor Heroku but it always gives me an error I tried several things but nothing works anyone can help me with that? This code were deployed in Heroku and gave me an error page unavailable I tried several times without succeeding

Github code : https://github.com/hazem-kamel/Guestbook-MERN

Logs when trying to deploy using GitHub and Heroku :

Logs :

-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false

-----> Installing binaries
       engines.node (package.json):  13.8.0
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 13.8.0...
       Downloading and installing node 13.8.0...
       Using default npm version: 6.13.6

-----> Installing dependencies
       Prebuild detected (node_modules already exists)
       Rebuilding any native modules

       > [email protected] install /tmp/build_b3af99df845ca37998271723b79f6f44/node_modules/bcrypt
       > node-pre-gyp install --fallback-to-build

       [bcrypt] Success: "/tmp/build_b3af99df845ca37998271723b79f6f44/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" already installed
       Pass --update-binary to reinstall or --build-from-source to recompile

       Installing any new modules (package.json)
       audited 286 packages in 2.176s

       3 packages are looking for funding
         run `npm fund` for details

       found 0 vulnerabilities


-----> Build
       Running heroku-postbuild

       > [email protected] heroku-postbuild /tmp/build_b3af99df845ca37998271723b79f6f44
       > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client

       audited 1926 packages in 13.657s

       58 packages are looking for funding
         run `npm fund` for details

       found 2 vulnerabilities (1 low, 1 high)
         run `npm audit fix` to fix them, or `npm audit` for details

       > [email protected] build /tmp/build_b3af99df845ca37998271723b79f6f44/client
       > react-scripts build

       Creating an optimized production build...
       Compiled with warnings.

       ./src/components/Login/Login.js
         Line 12:6:  React Hook useEffect has a missing dependency: 'Redirect'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

       ./src/components/Register/Register.js
         Line 12:6:  React Hook useEffect has a missing dependency: 'Redirect'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

       ./src/components/Chats/Chats.js
         Line 36:6:  React Hook useEffect has missing dependencies: 'friend' and 'user'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

       ./src/components/Dashboard/Dashboard.js
         Line 46:11:  Nested block is redundant  no-lone-blocks

       Search for the keywords to learn more about each warning.
       To ignore, add // eslint-disable-next-line to the line before.

       The project was built assuming it is hosted at /.
       You can control this with the homepage field in your package.json.

       The build folder is ready to be deployed.
       You may serve it with a static server:

         npm install -g serve
         serve -s build

       Find out more about deployment here:

         bit.ly/CRA-deploy
-----> Caching build
       - node_modules

-----> Pruning devDependencies
       audited 286 packages in 2.127s

       3 packages are looking for funding
         run `npm fund` for details

       found 0 vulnerabilities


-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 84.9M
-----> Launching...
       Released v3
       https://guestbook-chat.herokuapp.com/ deployed to Heroku```

Upvotes: 0

Views: 1440

Answers (1)

Ashtuosh Agrawal
Ashtuosh Agrawal

Reputation: 53

Write these scripts in your node backend package.json

    "scripts": {
    "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\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},

Write this at the bottom of your server.js 

// Serve static assets 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 || 8000;
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

And you are done. Just go and login through Heroku and setup the git branch. And do

git push heroku master

Upvotes: 1

Related Questions