how to view json in web browser

[fancyerii]

I cloned the repo and installed python depedencies successfully. I can also run "python execute.py -m lecture_01" to generate var/traces/lecture_01.json.
But I don't know how to open this json file. I guessed there must be some web server like flask running so I can visit this json file in browser. It seems it's served by nodejs(npm). But I am not familiar with javascript/nodejs.
So what should I do next after running "python execute.py -m lecture_01"

[percyliang]

See the instructions in the README.md under the Frontend section.

[seyoulala]

Could you provide a more detailed explanation of this part?

[braxtonliu]

Could you provide a more detailed explanation of this part?

I think it's pretty straightforward. Once you see the .json files under var/traces/, you can follow the Frontend steps from the README.

1. Go to the trace-viewer/ folder and start the frontend server:

cd trace-viewer
npm install    
npm run dev

2. Open your browser and visit: http://localhost:5173?trace=var/traces/lecture_01.json
   You should see the lecture opened in the browser.

I failed the first time but after removed and cloned again it works. Hope it helps!

[gmh1627]

After following the steps outlined in the handout, I still cannot display the rendered effect in the browser. I receive the following error. What could be the reason? My node.js version is v22.18.0, and my react version is 19.0.0

[tjliupeng]

Could you provide a more detailed explanation of this part?

I think it's pretty straightforward. Once you see the .json files under var/traces/, you can follow the Frontend steps from the README.

1. Go to the trace-viewer/ folder and start the frontend server:

cd trace-viewer
npm install    
npm run dev

2. Open your browser and visit: http://localhost:5173?trace=var/traces/lecture_01.json
   You should see the lecture opened in the browser.

I failed the first time but after removed and cloned again it works. Hope it helps!

I don't generate the lecture json myself. I use the json files under the /var/traces in the git repo .What I got is still the default UI of Vite + React.

[gmh1627]

After following the steps outlined in the handout, I still cannot display the rendered effect in the browser. I receive the following error. What could be the reason? My node.js version is v22.18.0, and my react version is 19.0.0

I solved this problem! The issue lies in the symbolic link. I am using Windows 11, and originally there were two files, var and images, in the trace-viewer\public directory, with contents of ../../var and ../../images respectively. When accessing http://localhost:5173/var/traces/sample.json, Vite cannot find the actual file, so it returns the default HTML page instead of rendering the JSON file. The correct operation is:

# (In administrator mode of cmd) Execute in the trace-viewer/public directory
# Delete existing files
del var
del images
# Creating Symbolic Links (Windows)
mklink /D var ..\..\var
mklink /D images ..\..\images

Or we can use the following commands to clone:

# Globally enable symbolic link support
git config --global core.symlinks true

# Or enable it only for the current repository
git config core.symlinks true

# Open the command prompt or PowerShell as an administrator, and enable symbolic links during cloning
git clone -c core.symlinks=true <repository-url>

Next, execute the following commands.

cd trace-viewer
npm install
npm run dev

[gmh1627]

Could you provide a more detailed explanation of this part?

I think it's pretty straightforward. Once you see the .json files under var/traces/, you can follow the Frontend steps from the README.

1. Go to the trace-viewer/ folder and start the frontend server:

cd trace-viewer
npm install    
npm run dev

2. Open your browser and visit: http://localhost:5173?trace=var/traces/lecture_01.json
   You should see the lecture opened in the browser.

I failed the first time but after removed and cloned again it works. Hope it helps!

I don't generate the lecture json myself. I use the json files under the /var/traces in the git repo .What I got is still the default UI of Vite + React.

Don't execute npm create vite@latest trace-viewer -- --template react. Clone the GitHub repository again. If the lecture notes still cannot be rendered, please refer to my previous message.

[tjliupeng]

Could you provide a more detailed explanation of this part?

I think it's pretty straightforward. Once you see the .json files under var/traces/, you can follow the Frontend steps from the README.

1. Go to the trace-viewer/ folder and start the frontend server:

cd trace-viewer
npm install    
npm run dev

2. Open your browser and visit: http://localhost:5173?trace=var/traces/lecture_01.json
   You should see the lecture opened in the browser.

I failed the first time but after removed and cloned again it works. Hope it helps!

I don't generate the lecture json myself. I use the json files under the /var/traces in the git repo .What I got is still the default UI of Vite + React.

Don't execute npm create vite@latest trace-viewer -- --template react. Clone the GitHub repository again. If the lecture notes still cannot be rendered, please refer to my previous message.

I follow what you said, and the browser displays nothing, then I turn on the debug mode and see there is error, does it relate to npm, vite or react version?

[gmh1627]

Could you provide a more detailed explanation of this part?

I think it's pretty straightforward. Once you see the .json files under var/traces/, you can follow the Frontend steps from the README.

1. Go to the trace-viewer/ folder and start the frontend server:

cd trace-viewer
npm install    
npm run dev

2. Open your browser and visit: http://localhost:5173?trace=var/traces/lecture_01.json
   You should see the lecture opened in the browser.

I failed the first time but after removed and cloned again it works. Hope it helps!

I don't generate the lecture json myself. I use the json files under the /var/traces in the git repo .What I got is still the default UI of Vite + React.

Don't execute npm create vite@latest trace-viewer -- --template react. Clone the GitHub repository again. If the lecture notes still cannot be rendered, please refer to my previous message.

I follow what you said, and the browser displays nothing, then I turn on the debug mode and see there is error, does it relate to npm, vite or react version?

Maybe you can ask AI about it? I did not come across this problem.

[tjliupeng]

Could you provide a more detailed explanation of this part?

I think it's pretty straightforward. Once you see the .json files under var/traces/, you can follow the Frontend steps from the README.

1. Go to the trace-viewer/ folder and start the frontend server:

cd trace-viewer
npm install    
npm run dev

2. Open your browser and visit: http://localhost:5173?trace=var/traces/lecture_01.json
   You should see the lecture opened in the browser.

I failed the first time but after removed and cloned again it works. Hope it helps!

I don't generate the lecture json myself. I use the json files under the /var/traces in the git repo .What I got is still the default UI of Vite + React.

Don't execute npm create vite@latest trace-viewer -- --template react. Clone the GitHub repository again. If the lecture notes still cannot be rendered, please refer to my previous message.

I follow what you said, and the browser displays nothing, then I turn on the debug mode and see there is error, does it relate to npm, vite or react version?

Maybe you can ask AI about it? I did not come across this problem.

After I restart the nodejs several times and it works. Have no idea.

[kyle5358]

I was able to run the project successfully on Ubuntu 22.04.
Here are the steps that worked for me:

1. clone the project in your dir
2. install the necessary package in requirements.txt
3. make sure the node version satisfy the project, I install node v24.12.0
4. There is some modification in trace-viewer/public
   cd ~/spring2025-lectures/trace-viewer/public
5. delete the default file
   rm -rf var images
6. Create symbolic links to the actual data directories:
   ln -s ../../var var
ln -s ../../images images
7. return to trace-viewer and run the project
   cd ..
npm install
npm run dev
8. open the link in local browser:
   http://localhost:5173/?trace=var/traces/lecture_01.json
   Note：
   Vite only serves files inside the trace-viewer/public directory, so the symbolic links are required for the browser to access var/ and images/.

[Wtbg]

For me, the point do not run all of the code in README.md npm create vite@latest trace-viewer -- --template react clone a new templete file replace the writen trace_viewer. So just npm install then npm run dev in trace_viewer dir fix all node error and you can get it.