Cannot display conent from app.js when deploying on Netlify (npm run build)

Question

I am having trouble getting content to come through in my app.js file when I try to host on Netlify (npm run build)

Here is what my package.json file looks like:

{
  "name": "nasa-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "dotenv": "^8.1.0",
    "jquery": "^1.9.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-helmet": "^5.2.1",
    "react-scripts": "0.9.5"
  },
  "devDependencies": {
    "babel-eslint": "^9.0.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-config-prettier": "^4.3.0",
    "eslint-config-wesbos": "0.0.19",
    "eslint-plugin-html": "^5.0.5",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^1.7.0",
    "prettier": "^1.18.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "description": "**A Day In The Life On Mars**",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/able-leopard/a-day-in-the-life-on-mars.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
  },
  "homepage": "https://github.com/able-leopard/a-day-in-the-life-on-mars#readme"
}

It seems like I can't post screenshots because I am still new here but basically all the hosted version shows is

<div id="root"><div/> while the local version actually displays all the contents in my app.js

Thanks so much in advance!

Going to be difficult to diagnose this without knowing how you are deploying to Netlify.. Do you get any errors during deployment? Does the Netlify URL load and you just don't see anything? Would you mind sharing a link to the repo? — Matt Oestreich, Aug 31 '19 at 17:43
@MattOestreich Yes for sure! Here is the link to the live version: https://a-day-in-life-on-mars.netlify.com/ Here is the link to the GH repo: https://github.com/able-leopard/a-day-in-the-life-on-mars — able-leopard, Aug 31 '19 at 18:00

Matt Oestreich · Accepted Answer · 2019-08-31T19:31:35.170

1

In your package.json you need to change your homepage to "/"..

This resolved your issue: https://vigilant-bhabha-b3e068.netlify.com/ (This link no longer works, this was only to demonstrate that I got it working for OP - not trying to hijack their deployment)

Let me know once you see this and I will remove the Netlify app I created and the repo I forked..

In order to demonstrate that this is working:

URL:

SITE:

{
  ...
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/able-leopard/a-day-in-the-life-on-mars/issues"
  },
  "homepage": "/"
}

edited Aug 31 '19 at 19:31

answered Aug 31 '19 at 18:29

Matt Oestreich

8,219
3
16
41

Awesome! I'll remove the app I published. – Matt Oestreich Aug 31 '19 at 19:22

Cannot display conent from app.js when deploying on Netlify (npm run build)

1 Answers1