Design comparison
Solution retrospective
My question is that when I build my REACT project using "npm run build". the "dist" directory is created at the root folder, so when I go to that dir using "cd dist" then few things happen that I don't understand:
- when I start the "dev server" images of web page are not able to load.
- when I run the "Live server" of VSCode Screen is completely blank not showing anything.
I fixed the issues with images by importing them on top of the React component "import imgSrc 'path' " instead of giving the path to the src attribute of <img> directly.
Community feedback
- @lorenzoanielPosted over 1 year ago
Good job on the project:
-
The images not loading when you statically insert the source to your img element is because of the different out put folder called 'dist' as you pointed out. The reason why now your imgs show up if you use import is because vite will consolidate all imports and change the path according to the new output build folder, in this case 'dist' (this will be different depending on which tooling you use: create-react-app, nextjs, etc.). You can tweak this by adding configurations to your vite config, i personally just put all my static assets in the public folder using this structure: /public/assets/imgs, but to each their own.
-
Can't comment on the live server but vite already has a built in live preview, simply type 'npm run dev' (in my case i use yarn so 'yarn dev') and it will run the NON BUILT version of your project, if you would like to see the PRDOUCTION version(dist) it is 'npm run preview' after the build. Double check the 'scripts' section on your package.json. It is recommended to use these as vite already has HMR feature (Hot module replacement) which lets you update your app without a full refresh or restart of the development server, no need for third party, just copy paste or click the localhost url link provided by vite.
Goodluck on your journey fellow student.
Marked as helpful1@nitroadam1233Posted over 1 year ago@lorenzoaniel If you could give me some feedback on my Result Summary Component, I would really appreciate it. I used MaterialUI and React to build the project.
0@lorenzoanielPosted over 1 year ago@nitroadam1233 Posted my feedback on your solutions page, sorry for my late response good job btw.
0 -
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord