Skip to content
Submitted about 2 years ago

Result-Summary-Component-Main

react, typescript, styled-components
Muhammad Wali•210
@Wali1209
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Mikhail Lorenzo Aniel•230
    @lorenzoaniel

    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 helpful

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