Quizzical local setup

[vocal widget]

Hello everyone! I have nearly completed the React basics module and am about to start the Quizzical solo project. Until now I have worked through the entire module directly in scrims, but I would like to be able to work locally on this project with GitHub desktop and VSC. I’ve been stuck for days now trying to do this. Can anybody help me get started? I’ve followed tutorials on how to create a React.js project with Vite and VSC. I get all the files in the project tree, as seen in the screenshot. I follow the link to the browser to show the project and am able to test by changing content. Everything works fine. But when I reopen the project and browser after closing, it is blank. Can anyone share how they have created the local files for this project? I would be so thankful!

[hasty cove]

double click on any file you wanna check

[royal bison]

The App.jsx file should have your project's starting point. Click the filename to access it.

[vocal widget]

Hi Eternal, thanks for helping! I have no problems opening and viewing the files. I can even work on them. The problem is with visualizing the project locally in my browser (the dev server). After the initial setup I open the browser on the local link provided by Vite (localhost: 5173) and can view the project in progress. The problem happens when I close the project after the initial setup. When I reopen, I can view and work on the files but when I “go live” in VSC the browser opens blank. I can’t see my work. I have also tried reopening with localhost 5173 (which was the link provided in the initial setup) but it is still blank. How do you visualize locally when you return to a project in progress? Thanks again for taking your time to help!

[vocal widget]

Hi Vimo, thanks for helping! The situation is pretty much as I have explained to Eternal in the message above. I have no problems opening and viewing the files. I can even work on them. The problem is with visualizing the project locally in my browser (the dev server). After the initial setup I open the browser on the local link provided by Vite (localhost: 5173) and can view the project in progress. The problem happens when I close the project after the initial setup. When I reopen, I can view and work on the files but when I “go live” in VSC the browser opens blank. I can’t see my work. I have also tried reopening with localhost 5173 (which was the link provided in the initial setup) but it is still blank. How do you visualize locally when you return to a project in progress? Thanks again for taking your time to help!

[royal bison]

Golive? you mean the live server? that won't work for React project.
You run the npm run dev command which leads you to localhost:5173.
You do not shut down that local server. just minimize the terminal and keep it running while you work on your project.

if you watch this scrim about local setup, they run the npm run dev server and then keep it running and then access via localhost in the browser.

[vocal widget]

Hi again Vimo and thanks for the suggestion. On first try it did not work. I ran npm run dev in the VSC terminal and got the following (see screenshot). So I opened Terminal directly (not from inside VSC), played with the pathway and was able to get the local server. I’d like to be able to do this while in VSC. Do you have any suggestions? Thanks again…you’ve already been a big help!

[royal bison]

this is a new project setup again?
the earlier was a directory named ReactApp the above screenshot is quizzical-app
make sure your project directory is the same in the terminal and you run the npm run dev command in the project directory which has the node_modules directory and package.json file.
if node_modules is missing, then first run npm install which will install all the project dependencies in the node_modules directory (which it will create). once that is installed you can run the npm run dev command.
The project needs to have package.json file from the create vite app you ran earlier.
Make sure you are inside the directory of the project when running any of the npm commands.