Projects check with FCC CDN

Hi fellow campers, I have just finished my Random Quote Generator using React. But I have a trouble by using FCC Cdn to check for requirements to pass the challenge.
Here is my project :
https://Ahmed-Elbessfy.github.io/random-quote-generator

My problem is that I creates React Apps using create-react-app option and I don’t know where to add FCC CDN link. I tried to add to the index.html file in the public folder but it didn’t work.

Please help if you know how to solve this problem.
Thanks

2 Likes

I’m still a beginner on react, but can you add a link tag in the head of your html file using a react component? The output should be:

<link rel="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"/>
1 Like

Well I tried this with the script tag but didn’t work.

1 Like

You can put the script in the html file in the public folder.

1 Like

did you try it and worked ?

Yes it works, but hopefully you just tested it.

1 Like

I did it before but it didn’t work !
I have added it again as you can see in this commit

can you please check and tell me if there is something wrong ?!!

1 Like

Hi @Ahmed-Elbessfy! I had the same problem that you have, and I just figured it out. You have to add the FCC CDN as a dependency in CodeSandBox to be able to run it. So simply copy the CDN link and paste it into the field above the ‘Add Resource’ button, then click that button. That should work55%20PM

2 Likes

You are not linking to the script correctly. It should just be a normal script tag with an src attribute.

You have:
<link rel="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js" />

Should be:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

1 Like

I have tried this one and got the same result :sleepy::tired_face:

I am using VS so how can I do this ?!

Hmm… I thought you were using CodeSandBox.io for some reason. If you want to use my solution you’d have to copy and paste your code into CodeSandBox.io’s environment.

1 Like

My guess is you are linking to the file in the head, move it to before the closing body tag. Then it should work.

Side note: When I put the test script in the head I get this error.

Uncaught TypeError: Cannot read property 'appendChild' of null
    at Module.<anonymous> (bundle.js:154)
    at r (bundle.js:1)
    at bundle.js:1
    at bundle.js:1
1 Like

I will try it but I think this error is about the bundle itself !!

You can add the FCC CDN in the same way that @stephepush mentioned above but, in addition to that, in order for the FCC test suite to display in Code Sandbox, you have to add

import ReactFCCtest from 'react-fcctest';

at the top of your App.js file and then include

<ReactFCCtest />

in its return statement along with the rest of your code. That ended up working for me after I read the npm package docs of react-fcctest.

If you don’t want to do all of that, you can also just include

https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

in the “External Resources” section of the left panel and then click on “Add Resource”.

2 Likes

Thanks a lot for your help but I don’t use sandbox and I still searching for a way to solve this issue

Did you actually try moving the script to just before the closing body tag? I don’t see it in your repo. It should work just fine.

As said, you can also try the react-fcctest npm module. Just know it is not an official fCC package. Just do an npm i react-fcctest in the root of your project, import it in App.js and add the component (look at the docs).