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 Installing and Using Create React App

Posted by Sharad Shivmath
Sharad Shivmath
14,446 Points

Where does the program begin when you hit 'npm start'?

Hi,

When you hit 'npm start', which file does it execute first? App.js is just a module. Looks like index.js sort of brings everything together.

I checked the registerServiceWorker.js file. There are a bunch of functions defined in the file.

I have no idea what is happening when you hit npm start. All I know for now is that somehow bundle.js gets created and gets included in the HTML file. But, I don't know how.

Can someone please explain what's happening?

Thanks, Sharad

Adam McGrade
Adam McGrade
26,333 Points
Adam McGrade
Adam McGrade
26,333 Points

If you look in /node_modules/react-scripts/scripts/ you will see the various script files that have been mapped to the npm commands in the your project's package.json, In the /node_modules/react-scripts/scripts/start.js file, is the boilerplate code required for building the project and starting the development server.

1 Answer

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Hiya there! I was watching this vid on Google developer's channel on youtube like couple of hours ago ,and it was about PWAs(progressive web apps) and its toolings and how browsers handles 'em behind the scenes. There was a section of 5 minutes where they explained the power of Service Workers and Web Packs. and React. So basically Service Worker is the script file which wrap up your offline browsing, offline caching, push notification, smart browsing and so much more. Its considered like future of web apps. Its like having your own mobile app but on browser instead. Currently React is a very exciting prospect and very active project in the IT industry.

Now about npm start, this command executes your server in development mode. I mean when you're developing on local machine, you do need dev server right? If you dont wanna use the power of create-react-app , you can always eject from it. More experienced developers use web packs and babel-cli to configure their projects in their own way. With this way , you're in control of whats going on in your app. Whereas with create-react-app you're not in control of whats going on the behind the scenes.

Now regarding bundle.js, as the name suggests , it bundles all the assets in one file in production environment. Remember when i told you about Service workers and caching, bundle.js makes it possible to cache a certain component of your app for offline caching and faster performance of your app. I gotta say i was really impressed with everything about React. I mean dont ya?

~ Ari

Sharad Shivmath
Sharad Shivmath
14,446 Points

Hi Ari,

Thanks for the detailed explanation. I already have an understanding of what you said.

I'm just looking for the file in create-react-app that has the entry point for 'npm start', and I cannot find it anywhere in the files.

Ari Misha
Ari Misha
19,323 Points
Ari Misha
Ari Misha
19,323 Points

Sharad Shivmath Yeah you wont find one! Thats the thing with create-react-app , it all happens behind the scenes. Most of the React developers choose Expressjs for their backend server. Even if you're working with create-react-app , there will be a time when you're gonna have to choose your backend server in production environment.

~ Ari