How to host a project with a json file?

[Cody_Biggs]

I have just about completed the project I was doing, and unfortunately it took me longer to realize that I can not host it normally on Vercel like I usually do. I read that it was possible using github pages, but I have not found a solid example of how that is done. Any suggestions? I would hate to have to go back and change each file of an 8 page project.

[jenovs]

What exactly you can’t do on Vercel that will be possible on Github Pages?

[Cody_Biggs]

when using vercel I get a 404 error as soon as my project loads up. When using github pages, everything runs fine on my laptop. However, when I try and use my phone to view it the project does not display any of the json file data. Same with netlify, it works on the laptop but not my phone. Which is why I am wondering if I need to do something special to configure it

[jenovs]

This is where you post a link to the github so we can check it.

[Cody_Biggs]

Here is the repo link

GitHub - Cod-Bigg/planets

The page was hosted using the root, so I had to move all my files down there. Incase anyone is wondering why it looks like that.

The actual page link is

https://cod-bigg.github.io/planets

Before anyone says anything. Im well aware of all html pages uses the same js file and not their own I created for them. I pasted html changes to each file which changed the js source and I just have not changed it back yet.

[jenovs]

From your code I see that you’re using

import ... assert { type: json }

which is an experimental feature and works only on desktop Chrome.

Why don’t you just import those files as js? Or maybe use fetch?

[Cody_Biggs]

@jenovs

which is an experimental feature and works only on desktop Chrome.

Right…I remember them saying that when they helped me with it.

@jenovs

Why don’t you just import those files as js? Or maybe use fetch ?

So, I have asked other forums about fetch, and usually the response I get is just a link to the fetch mdn. Never used fetch or a json file before, so I am going to be honest and say that I do not understand it 100%. Looking at the mdn it says:

A basic fetch request is really simple to set up. Have a look at the following code:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

I understand that they are fetching the .json and then console.logging it, but how do they use that data? That is what I do not get. Lets say for example they only want a part of that .json file and display it somewhere. How do they get that part of the .json using the above code?

[jenovs]

To use the data from fetch you either save it as global variable, pass to external functions as arguments or just use directly.

So for your code you could move stuff that is using data from planets inside the second .then():

.then(planets => {
  planetName.innerHTML = planets[4].name;
  ...
  planetTemp.innerHTML = planets[4].temperature;
  // also functions
}

[Cody_Biggs]

Appreciate it. I will give it a try

[Cody_Biggs]

@Cody_Biggs

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

Well, Im just going have to forget using the json file. I used the above example, and then I get the error “fetch api can not load file path URL scheme file is not supported”

[bbsmooth]

This is what I suggested in a previous thread about your issue. I just cloned your github repo and tested it and it seems to work fine.

• Change the name of data.json to data.js.
• Add a new line to the top of data.js:

export const planets =

• In every JS file that needs access to this data, import it as follows:

import { planets } from "./starter-code/data.js";

[jenovs]

Did you just locally open index.html file or did you use some kind of local server?