How to run project in codepen and to mark it as complete?

freeCodeCamp Support
1

Tell us what’s happening:

  1. Till now other challenges needed to update single files ( either of HTML, JS ) in codepen
  2. I’ve completed project locally with create-react-app, how can I test it in codepen and share url so that I can mark this project as success ?
  3. I did fork of codepen project shared in challenge but don’t know how to fit multiple files there ?

Your code so far

Screen Shot 2020-10-29 at 5.59.59 PM
Screen Shot 2020-10-29 at 5.59.59 PM662×1300 61.5 KB

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

2

if you open the pen settings in codepen, go to the JavaScript section, you can use babel as preprocessor and import react there, that will let you write react code in the JavaScript box of the pen and it will be rendered

if you then have the script with the link to the test suite, you can test your project in the pen

1 Like
3

In my case I have multiple JS files, in codepex how can I write all of them in single file ?
Can you please point me to some existing project to understand better ?

4

the pens in codepen offer only that, but you don’t need to use codepen, you can deploy your peoject somewhere, and submit the live version or your project whatever servive you have used

5

I can deploy it on netlify but how can I make test cases from codepen pass ?

In case you’ve finished this project; please share your project here I would like to have a look at solution and compare with mine.

6

@ilenia currently https://codepen.io/vikramvi/pen/WNxMygL this is what I’ve done, how can I get tests passing ?

This works fine in VSCode but on codepen I don’t see any output.

How exactly do we need to run react project with codepen as challenge explicitly asks for Solution Link: from codepen itself

7

that’s not react… import jQuery and set the preprocessor to None

From the FAQ:

Do I have to use CodePen for the front end projects?

As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.

You can use GitHub pages or surge.sh as alternatives to CodePen.

8

sorry my bad, I had removed earlier code of react and playing around with jQuery. Now I’ve put back the code. Please recheck, also I’ve added settings with fb libraries which were missing earlier.

But I’m not sure how to use npm run in codepen to make this work just like VSCode. Let me try other platforms as well

9

in codepen you have a single file, you can’t export stuff and import it somewhere else

if you try with something simpler, you will notice that it’s rendered inmediately there.

maybe yes, try to deploy it somewhere else, instead of making the drastic change of condensing everything to a single file

10

Thanks, found this useful article about hosting react app free of cost https://blog.logrocket.com/8-ways-to-deploy-a-react-app-for-free/