404 Error on Custom Domain Built site

I deployed my site on Netlify with the custom domain name that I purchased. I didn’t do anything past that. I just purchased the name and connected it to my Github repo.

Website: https://narissa-hajratalli.com/
GitHub Repo: https://github.com/narissa-hajratalli/portfolio

I try to open the website and I get:
“Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.”

It says published in the logs and I have enabled automatic deployment. Every time I push my changes to my repo, the changes are published in the logs.

Here is a screenshot as well. I tried putting “code” in base directory and that didn’t work. I’ve used Netlify before with free domain names, so I thought there was an issue with my purchase.

Was I supposed to register it with GoDaddy somehow? I don’t see instructions anywhere on how to do that. I’ve only seen it if you’ve directly purchased the domain name from GoDaddy. All I’ve done is purchase the domain name from Netlify and connect it to my repo.

I tried to connect the repo to a free Netlify domain name and I still got the same 404. Is there something wrong with the repo itself?

BUILD SETTINGS

Hi, @narissa-hajratalli, the only thing missing is changing the publish directory to “dist”.

This is hinted at in the build logs quoted below:

9:08:34 PM:  DONE  Build complete. The dist directory is ready to be deployed.

Right now the index.html file is under the dist/ path here:

https://narissa-hajratalli.com/dist/

None of the javascript and CSS work because of this. For example the CSS file is referenced like this:

<link href="/css/app.06f84678.css" rel="preload" as="style">

That would be this URL:

https://narissa-hajratalli.com/css/app.06f84678.css (<- this is a 404)

However, currently the file is in the wrong place, the URL below:

https://narissa-hajratalli.com/dist/css/app.06f84678.css (<- this URL works but is wrong)

Again, if you change the publish directory to “dist” it will move all these file “up one directory” and the site will work correctly.

There is more information about this here:

If changing the publish directory doesn’t fix this or if there are any questions, please let us know.

Hi Luke!

Thanks for getting back to me.
I changed it as below but am still getting a 404 error when I got to narissa-hajratalli.com

@narissa-hajratalli Did you re-build your site? I’m still seeing your page under the /dist/ subdirectory.

Hi Greg,

I see there is an issue. I try to run npm run build but I get the following error:

Here is the log from netlify:

12:28:37 PM: $ npm run build
12:28:37 PM: npm ERR! code ENOENT
12:28:37 PM: npm ERR! syscall open
12:28:37 PM: npm ERR! path /opt/build/repo/package.json
12:28:37 PM: npm ERR! errno -2
12:28:37 PM: npm ERR! enoent ENOENT: no such file or directory, open ‘/opt/build/repo/package.json’
12:28:37 PM: npm ERR! enoent This is related to npm not being able to find a file.
12:28:37 PM: npm ERR! enoent
12:28:37 PM: npm ERR! A complete log of this run can be found in:
12:28:37 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-09-29T16_28_37_476Z-debug.log
12:28:37 PM: ​
12:28:37 PM: ┌─────────────────────────────┐
12:28:37 PM: │ “build.command” failed │
12:28:37 PM: └─────────────────────────────┘
12:28:37 PM: ​
12:28:37 PM: Error message
12:28:37 PM: Command failed with exit code 254: npm run build
12:28:37 PM: ​
12:28:37 PM: Error location
12:28:37 PM: In Build command from Netlify app:
12:28:37 PM: npm run build
12:28:37 PM: ​
12:28:37 PM: Resolved config
12:28:37 PM: build:
12:28:37 PM: command: npm run build
12:28:37 PM: commandOrigin: ui
12:28:37 PM: publish: /opt/build/repo/dist

I thought this could have been because I made a lot of edits to my repository (I changed my entire file organization. I was using Vue CLI but decided to then use 1 Vue instance instead). I disconnected and reconnected my repo and still I received the same error.

hi there, seemingly you don’t have a package.json or it is in the wrong place - can you confirm it is present and where it needs to be?

Hi Perry,

I do not have a package.json anymore since I changed up my project and decided not to use Vue CLI. However, I’ve deployed repos to Netlify in the past without having a package.json. For example, I created this project previously and it is on Netlify: https://github.com/narissa-hajratalli/project-1-portfolio

hi @narissa-hajratalli, you dont need a package.json if all you are deploying is static html that is already complete and built, but if you are using any kind of static site generator (gatsby, react, vue, and many more) you’ll need a package.json to tell us how to manage and build your site, which dependencies it needs, etc.

Hi Perry,

I see. I understand that. However, even though I am using Vue, I am not using Vue CLI so I do not have a package.json. I added the Vue CDN script tag to my HTML document. I’ve also been able to deploy projects in the past on Netlify using this method without a package.json file. Example is here: https://github.com/e-mbrown/project3-frontend

I’m open to trying this but I’m not sure what I would include in a package.json and what dependencies I would even install, given that I’m just using the Vue CDN script tag.

Hi, @narissa-hajratalli. I see the repo has changed substantially here:

https://github.com/narissa-hajratalli/portfolio

I think the correct settings now are to have all three fields (build command, base directory, and publish directory) set to blank/empty.

If that doesn’t work, please let us know.

Hi Luke,

Indeed. I decided to change a lot of the structure and the stack I am using for my app.
Thanks so much. That worked!

1 Like

great! glad its working now :tada: