Video-44-Publish-Heroku (#44)

Author: basir

.gitignore

@@ -1,5 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 dist
 /dist

Procfile

@@ -0,0 +1 @@
+web: node dist/server.js

README.md

@@ -363,7 +363,25 @@ Feel free to take a look at the course preview and enroll if it is along with yo
     3. create linear chart for daily sales
     4. create pie chart for product categories
 44. Publish heroku
-    1. publish steps
+    1. Create git repository
+    2. Create heroku account
+    3. install Heroku CLI
+    4. heroku login
+    5. heroku apps:create <yourname>jsamazona
+    6. Edit package.json for heroku-prebuild
+    7. Edit package.json for heroku-postbuild
+    8. Edit package.json for node engines
+    9. Create Procfile
+    10. Edit server.js for PORT
+    11. Create mongodb atlas database
+    12. create MongoDB Account
+    13. open cloud.mongodb.com
+    14. add new user and save username and password
+    15. set Network Access to accept all requests
+    16. Create new database
+    17. create connection string based on db name and user and password
+    18. Set Cloud MongoDB connection in heroku env variables
+    19. Commit and push
 45. Product Search Bar
     1. create search bar in Header.js
     2. add style

backend/config.js

@@ -3,6 +3,7 @@ import dotenv from 'dotenv';
 dotenv.config();
 
 export default {
+  PORT: process.env.PORT || 5000,
   MONGODB_URL: process.env.MONGODB_URL,
   JWT_SECRET: process.env.JWT_SECRET,
   PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID,

backend/server.js

@@ -40,6 +40,6 @@ app.use((err, req, res, next) => {
   const status = err.name && err.name === 'ValidationError' ? 400 : 500;
   res.status(status).send({ message: err.message });
 });
-app.listen(5000, () => {
+app.listen(config.PORT, () => {
   console.log('serve at http://localhost:5000');
 });

frontend/src/config.js

@@ -1 +1,3 @@
-export const apiUrl = 'http://localhost:5000';
+export const apiUrl = document.location.href.startsWith('http://localhost')
+  ? 'http://localhost:5000'
+  : '';

package.json

@@ -7,7 +7,8 @@
     "start": "nodemon --watch backend --exec babel-node backend/server.js",
     "build": "rm -rf dest && babel backend -d dist",
     "serve": "node dist/server.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "heroku-prebuild": "cd frontend && npm install --dev",
+    "heroku-postbuild": "npm run build && cd frontend && npm install && npm run build"
   },
   "repository": {
     "type": "git",
@@ -39,5 +40,9 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "nodemon": "^2.0.4"
+  },
+  "engines": {
+    "node": "12.4.0",
+    "npm": "6.9.0"
   }
 }