Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Components (2018) Build Modular Interfaces with Components Separating Class Components Into Modules

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Working remotely with Create React App.

I ran into some problems working remotely on this project using Create React App.

The problem occured when I did a git pull on my PC to catch up on a lot of commits. To be honest, I kind of expected it to happen that when I did npm start, this happened.

> react-scripts start

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! scoreboard@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the scoreboard@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\path\to\file\goes\here\2018-10-17T12_12_00_696Z-debug.log

One way to this would be to do a fresh install of Create React App with npx, but this would give me a whole new project folder in my repository and I don't want to create new commit history every time I want to work on the project at a different location.

So after a little digging on Stack Overflow I experimented with git clone which apparently resolved similar issues. So basically deleting the local repository and doing git clone on the directory.

Same Result.

I managed to get it going with a simple

npm install

But right now I'm a little apprehensive that committing this modification to package-lock.json with damage my connection to localhost:3000 on my local machine.

So for now, I'll just go back to working on the project at the original location but for future reference how do I resolve this in the future? I'd love to know how to work more remotely with CRA projects

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Jonathan Grieve ! Generally speaking, we add our node_modules/ to our .gitignore file. We do this, because all of our packages like Express, React etc etc get installed there. It would be unwieldy to have that on our GitHub repository and ultimately, there is no need. That's what your package.json is for. It's to tell the program or npm install what needs to be installed to run your app. You will not be able to run the app at all until you have the node_modules/ folder present. And you will not be able to have that until you first run npm install. So each time you go to a new device and want to work on this, after you clone or pull the repository, you will first then have to run npm i or npm install so that you will have access to the dependencies. This is what "dependency" means. That app is dependent on those modules being present.

The package-lock.json is a file that says what version of those modules to use. And you can update/edit this anytime. I wouldn't be apprehensive of committing this at all.

Hope this helps! :sparkles:

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Jennifer,

Yes, I too had node_modules set up for .gitignore. I did it backwards the other day and Git gave me a right old ticking off for trying to add so many files. 😊

So it's really not an issue then to have an extra commit for each new device/system that says "dependencies for new device". Thanks. My biggest concern was having the log littered with irrelevant commit history!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Jonathan Grieve Ideally, you'd commit your .gitignore which ignores the node_modules so anything you download or install even on another system won't count as a "change" as it's being ignored. Only changes to the package.json would then be counted as a change if you then installed a new dependency in your project. Thus when you commit, the change wouldn't be in the modules, it will be in the file that tells the app which modules it needs. When you then go to even another system that has never before gotten the app, it will download the new package.json which contains the names of the new modules and when you do npm install it will get all needed modules.

To reiterate: simply downloading the modules contained in the package.json list does not by itself constitute as a "change" if the .gitignore is there and intact. In fact, after simply doing that and running git status you should see that there are no changes available to stage :smiley: