Managing Packages with Npm - How to Use package.json, the Core of Any Node.js Project or npm Package

[P1xt]

Describe your problem and - if possible - how to reproduce it

In Introduction to the Managing Packages with npm Challenges it says to click the following link to create a glitch project for the following lessons:

https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-npm

or to clone the following repository:

https://github.com/freeCodeCamp/boilerplate-npm/

I did both and tried both for the next lesson How to Use package.json, the Core of Any Node.js Project or npm Package.

Cloning the repo and changing it just flat out doesn't work. Here's my repo on Github. If I put a link to my repo and submit the challenge, it fails with the message "package.json should have a valid "author" key" and this in the console:

it looks like the test is adding api into the filename and not even finding the package.json.

The issue with glitch is a bit trickier. It works fine on Firefox. However, if you use the original link at the start of the npm lessons to create your glitch project on Chrome, instead of getting a clone of the FCC project as your starter project, you get the base glitch app as your starter project. And, it doesn't work for the tests. (This is the app I got, https://flashy-paperback.glitch.me, it's not the FCC starter)

Note: If you originally create the Glitch app by clicking the "click here" on Chrome, the app that is created won't work for submitting lessons regardless of browser. You have to actually "click here" on Firefox, then you get a Glitch project that will work for the lessons in Firefox or Chrome.

Note that the Chrome issue might be more a Glitch issue with Chrome on Manjaro, for some reason Glitch runs super-slow, lags out, and crashes on Chrome for me.

Add a Link to the page with the problem

Tell us about your browser and operating system

• Browser Name: Chrome
• Browser Version: Version 66.0.3359.181 (Official Build) (64-bit)
• Operating System: Manjaro Linux 17.1.10

If possible, add a screenshot here

[anku255]

@P1xt I looked at the source code of this challenge here.

The tests will pass only when provided_url + '/_api/package.json' returns a package.json file.

Thus, a github url will never pass the test.

Also, if you use any glitch project other than FCC starter code then it will not have a route /_api/package.json which serves the package.json file. Hence, the tests will fail again.

If you look at the server.js in FCC starter file. You will find this code

app.route('/_api/package.json')
  .get(function(req, res, next) {
    console.log('requested');
    fs.readFile(__dirname + '/package.json', function(err, data) {
      if(err) return next(err);
      res.type('txt').send(data.toString());
    });
  });

This needs to be present only then the tests will pass.

[P1xt]

@anku255 Yes, that is my point. The instructions specifically state that you can clone and use the github repo instead of Glitch - but

Thus, a github url will never pass the test.

Also, using Glitch to do the project was (for me) impossible on Chrome.

[cryptospider937]

Hi @P1xt , @anku255
I found a work around for the GitHub instructions.
One can first create a feature branch named _api, make the required changes in package.json.
Then navigate to the modified package.json and click on raw format. Copy the url for the raw format.
In my case, it is https://raw.githubusercontent.com/mihir-mahakalkar/boilerplate-npm/_api/package.json.
The last step is to delete /_api/package.json string from the above url, and then paste it in the challenge input field. In my case, it should be https://raw.githubusercontent.com/mihir-mahakalkar/boilerplate-npm

[TheNewStyles]

@mihir-mahakalkar this solution worked for me. Well done. Thanks!

[DaniloNovakovic]

Hey guys, i was having a bit of trouble with Glitch but i made it work. What i did is change the project name from the default/random one into my 'fcc-boilerplate-danilo' , then i pressed little key icon:




After that i used the following link to submit it in the challange :




Hope this helps somebody. :)

[rabindranathfv]

that happen to me some timeout, idk why

[ghost]

same as @rabindranathfv, I noticed that after cloning the glitch project it thinks there is no 'package.json' and to run 'refresh' from the console. After which there are very few files left.

steps:

• clone project using glitch link provided
• see small error msg in top right that say's something went wrong
• logs are complaining over and over that package.json does not exist
• run refresh from the console and see that in fact the only files present are /assets and .env.

confirmed on codesandbox.io as well by cloning the github repo with a similar error message. On attempting to create a new sandbox from the github repo there is an error about missing package.json and the clone fails.

steps:

• https://codesandbox.io/s/github
• paste in https://github.com/freeCodeCamp/boilerplate-npm/
• error page: something went wrong, could not find package.json

[jminkler]

Glitch not working at all, neither is cloning from github. Changing the package.json in glitch, and it basically deletes all the files, then tries to look for /app/server.js from the bootstrap. Doesn't read the json from github raw

[tkodev]

The section "Introduction to the Managing Packages with NPM Challenges" using the git repo, the instructions to run server.js to get the _api/package.json route are missing.

Maybe the instructions should suggest what @unicorn93 mentioned (#17584 (comment)) or have them create an _api folder in their repo with a package.json in it

If you look at the challenges in the section, it's only a newbie intro to package.json. The folder structure and server set up seems complex for this purpose and does not provide enough instruction for git repo users.

[TCarmine]

Hi @P1xt , @anku255
I found a work around for the GitHub instructions.
One can first create a feature branch named _api, make the required changes in package.json.
Then navigate to the modified package.json and click on raw format. Copy the url for the raw format.
In my case, it is https://raw.githubusercontent.com/mihir-mahakalkar/boilerplate-npm/_api/package.json.
The last step is to delete /_api/package.json string from the above url, and then paste it in the challenge input field. In my case, it should be https://raw.githubusercontent.com/mihir-mahakalkar/boilerplate-npm

This worked for me as well on a fork of tha repo. Because the check function as @anku255 noticed look fro that path

[IgorSushko1]

I cant unterstand what need to do.. I did everything suggested here, but it's not work

[ilobo22]

I used github to do the "Basic Node and Express" tutorial but when I gave it my link, it always gave me a 404 error message even though I submitted the raw JSON and checked my answers online. If you checkout the following users in the thread, anku255 and unicorn93, they provide a solution to the problem. However, this only worked for the "Managing packages with npm" tutorial but not the Node and Express. If you take a look at line 17 in the following link, here, it shows what url is required and what it appends. I did that way but it still didn't work.

[raisedadead]

/cc @scissorsneedfoodtoo

[themagicbean]

Having the same issue. Code and app link I submitted. (Actually, I tried all links Glitch would give me -- project, live app, code, and the "view" page link.) Firefox 77.0.1 (64-bit, Win 10).

[ShaunSHamilton]

@themagicbean , Whilst this may not be the issue you are facing, please note: Glitch has been highly unstable, for the past month. The status of Glitch can be found here: https://status.glitch.com/

[QuincyLarson]

@scissorsneedfoodtoo now that we've moved off of Glitch, is this issue resolved?

[scissorsneedfoodtoo]

Tested with the current production site and by forking the boilerplate-npm repo with this link on the Introduction to the Managing Packages with npm Challenges intro page: https://repl.it/github/freeCodeCamp/boilerplate-npm

Went through all the challenges in this section on Repl.it and didn't run into any issues.

[hollidayeric]

Hello, I've just started this course and have experienced the same error as reported before, however, I am using Repl.it. I tried the earlier suggestion of sharing the raw data link from Github and still get an error about missing a valid author key. I also tried removing all the existing code so the file only had "author": "hollidayeric", remaining.
Here is my Repl.it file link: https://repl.it/@hollidayeric/boilerplate-npm#package.json. In case it was something with creating the code in my own Repl.it account I did it anonymously as well. I still received the error and am not able to proceed. Please share any suggestions or steps I may have missed.

Here is the code as it currently appears in Repl.it:

Here is the link and Test Result from the course:

[ShaunSHamilton]

@hollidayeric The link you are providing in the solution box is not the link to the live app the tests need access to.

The link to submit should look something like:
https://boilerplate-npm.hollidayeric.repl.run

And is available to copy from the preview browser URL bar

Hope this clarifies

[hollidayeric]

@SKY020 - Thank you! I still had trouble with https://boilerplate-npm.hollidayeric.repl.run. I opened the editor in a new window and noticed the link is slightly different for the program. It is running and works to submit the lessons with this link: https://boilerplate-npm.hollidayeric.repl.co

[trikunc]

1. Fork from https://github.com/freeCodeCamp/boilerplate-npm.git

2. add "author": "your name",

3. run

4. copy link after appear

5. paste to another tab in your browser

6. paste to your FCC
   

7. paste to another tab in your browser

8. paste to your FCC