Is there any default transpiler and bundler used by node package manager? - reactjs

I'm new to reactJs. I'm using node package manager (NPM) for release, build and hosting process. I first ran npm install -g create-react-app command to install the command whose template helped me in creating a basic reactJs application. Now my package.json file looks like this:
{
"name": "my-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
If you closely look at both dependencies and devDependencies section you will not be able to find anything like Babel (a transpiler) or webpack (a bundler). So I'm wondering that when I run my website using npn run start command then how my reactJs class files are getting transpiled and bundled. Is there any default transpiler and bundler used by NPM or I'm missing something in my observation?
[Update After Nicholas's comment]:
On a contrary, in a live project code base in which I work in my office, I see that these dependencies like babel-core, babel-cli, webpack etc are mentioned in devDependencies section. They are absent from dependencies section. If react-scripts already have an implicit dependency on babel-core, babel-cli, webpack etc then why do they have to be mentioned explicitly in devDependencies section? Even devDependencies can also simply do so by mentioning react-scripts they way it is happening in my test project. Isn't it? But my fellow developers aren't doing so.

react-scripts, which get's called when you run $ npm start has those transpilers/bundlers as it's own dependencies.
You won't see the dependencies of an explicitly installed module, react-scripts in your example, within your package.json. They would exist as dependencies in react-scripts module's package.json instead.
For example, have a look at the package.json of this subfolder, of that react-scripts module.
It contains a bunch of dependencies, some of them being Babel and Webpack.

Related

Deploying React App from Codesandbox to Github Pages

I followed this youtube tutorial to deploy my react app to github pages. I made my react app in codesandbox and exported my sandbox to my github. I downloaded node.js, npm, and git.
My folder structure:
Users > test > package-lock.json + andair-master > (inside andair-master) node_modules + build > (inside build) public + src + package.json
I downloaded my github project "andair-master" and copied and pasted its contents into an empty folder "test".
I opened Git Bash and changed directories until I was in "andair-master". I did "git init" then "git remote add origin https://github.com/develijahlee/andair.git" then I tried "npm run deploy". I realized I was missing a "build" folder so I made one within the "andair-master" folder. Then I put my "src" and "public" folders inside the "build" folder and tried running "npm run deploy". Still not working. I notice that my github is missing a gh-pages branch. I am not sure how to make a gh-pages branch or why "npm run deploy" is not working. If anyone could tell me if I'm missing a step, that would be greatly apprecitated. Thank you.
There are a few missing dependencies in your create-react-app project. This probably happened because you tried to export the project from codesandbox (I'm not sure though)
You have to fix those first.
Dependency 1 (react-scripts):
npm install react-scripts --save-dev
Dependency 2 (node-sass because you are using scss in your project)
npm install node-sass --save
Dependency 3 (gh-pages)
npm install gh-pages --save-dev
After the above steps are completed, verify your package.json to match below structure
{
"name": "and-air",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"homepage": "https://develijahlee.github.io/andair/",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "1.2.25",
"#fortawesome/free-regular-svg-icons": "5.11.2",
"#fortawesome/react-fontawesome": "0.1.5",
"node-sass": "^4.13.0",
"react": "16.9.0",
"react-dom": "16.8.6"
},
"devDependencies": {
"gh-pages": "^2.1.1",
"react-scripts": "^3.2.0",
"typescript": "3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Now you can run the deploy script
npm run deploy
After this step, verify that a new branch created with name gh-pages
Click on the settings tab in github
Scroll down to the GitHub Pages section and switch your branch to gh-pages branch.
You should get a success message when the page is live.
Here is what deploy script in your code:
"deploy": "gh-pages -d build"
Which is means gh-pages tool use build directory to make it deploy, so you need two things in order to make it work
Create a build folder properly with the following command:
npm run build
now install gh-pages tool for your add locally:
npm i gh-pages
Now you can run deploy command, and it'll work.
I hope this can be helpful to you.

React: missing script: start

how to run npm start
Bhanukas-MacBook-Pro:Shopping Card Admin Panel bhanukaisuru$ npm start
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/bhanukaisuru/.npm/_logs/2019-05-01T05_42_52_916Z-debug.log
package.json file
{
"name": "shopping-cart-admin-panel",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:3000"
}
I can see you do have "start" script in your package.json
"scripts": {
"start": "react-scripts start", <--- here
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
react-scripts is a set of scripts from the create-react-app starter pack.
You need to run npm start command in your terminal in order to run the app.
In common apps, the start script looks like so:
"start": "npx node index.js"
Where index.js can be also the server.js file
it is because of global installation of create-react-app or your node.js is not updated.follow the below steps
uninstall react from global
----> npm uninstall -g create-react-app
Then try to update the npm and all the packages.
----> npm install -g npm#latest
Now create your new react app
----> npx create-react-app yout-app-name
I had this same problem at an early stage. Getting the error:
npm ERR! missing script: start
For starters, make sure that you are in the "client" (cd client) or whichever name that you chose to build your creat-react-app 's client side.
It seems as if you already have your start and react-scripts, so hope this helps.
I had the same issue and spent a whole day trying to fix it, only to realize that the root folder in which I created the react app had a "&" sign in it. npm has looked up the start script on an invalid folder path by omitting the characters before and including the &. Once I moved the project to a no-nonsense folder path, everything worked flawlessly. Hope this helps out a Node/React newbie like me.
Suggestions -->
-sometimes , if you install yarn specifically using $ npm install -g yarn., this blocks all sort of scripts and react dom to install and it creates yarn.lock file which blocks it creating the scripts .
So uninstall yarn using
$ npm uninstall -g yarn
and then delete all specific folders that were created previously on the project.
And run
$npx create-react-app my-app
Happy Hacking!
ERR: Script missing
For a solution follow these steps in PowerShell
uninstall react from global
 npm uninstall -g create-react-app
Then try to update the npm and all the packages.
npm install -g npm#latest
Now create your new react app
npx create-react-app yout-app-name
consider you checked any app from git
open your package.json
under the scripts section, you will have the field called start
for the create react app,this will be like "start": "npx node index.js
But for your app, you may have customized scripts something like
"start:env": "some env configs"
just try to run cmd in your terminal npm run start:env
Dear Guys in most of our cases everything is Ok!
The most common that we do in fact, is that we start the same path in our code editor that we have already choosen for already existing folders. So while working with react make sure that you have open the right folder with right path in you code editor and then simply!
----npm start"--
It would almost in all cases if you take this little caution, Otherwise all your codes will be useless if apply this on wrong path or folder.

How to setup new reactjs project on local environment or system?

I started to learn reactjs for front end in web development. For learning purpose I install node and npm on my local system below are the versions of node and npm
node v8.11.3
npm v5.6.0
and I have run bellow command
npm init
and create pakage.json following file using command
{
"name": "loginpage",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"react-scripts": "0.9.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"main": "index.js",
"author": "rizwan",
"license": "ISC",
"description": ""
}
in next step i run following command install node and react dependencies
npm install
and then I run create-react-app hello-world commands but I did't find any change in my current local project folder exception pakage.json file I don't know that where I am doing mistake. Guide in right direction.
Create-react-app creates everything from scratch, you don't need to create a folder or npm init, anything like that.
Just run create-react-app my-project and you'll have everything you need in the my-project folder.
To create react app
first, install create-react-app globally
then, run these commands
create-react-app app-name
cd app-name
npm run start
I prefer to use Yarn instead of npm

Need I install react-router if I installed #types/react-router?

I started a react project through create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
And I got the following package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-scripts-ts": "2.16.0"
},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom",
"eject": "react-scripts-ts eject"
},
"devDependencies": {
"#types/jest": "^23.1.0",
"#types/node": "^10.3.3",
"#types/react": "^16.3.18",
"#types/react-dom": "^16.0.6",
"typescript": "^2.9.2"
}
}
I understand that packages in devDependencies won't be needed for building the production bundle, therefore we have dependencies and devDependencies separately. However, if I want to add a new package, such as react-router, should I do the following two separately like following?
npm install --save react-router
npm install --save-dev #types/react-router
or should I do
npm install --save #types/react-router
If either way if fine, what's the difference between the two approaches?
npm install --save react-router Installs the actual module while,
npm install --save-dev #types/react-router only install type information for typescript. The type information has no functionality of its own, so you need to install both.
The type information is installed as a dev dependency because it isn't required after the build process which transforms typescript into JavaScript.
The answer to the question is yes.
Installing #types/react-router you only get TypeScript type definitions for react-router and not the react-router functionality.

An ejected project cannot use the build command anymore

I am new in Angular. I accidentally ejected my project using command-line, i don't remember which command i used. but when i try to run command
ng serve --open
it throws me an error of
An ejected project cannot use the build command anymore.
I also re-installed angular-cli as said in this Stackoverflow Question but no use.
Can anyone help me with this?
open the angular-cli.json, you should see this at the top
"project": {
"name": "proj-name",
"ejected": true,
}
remove the ejected part and it should work
once you ejected the project you will get a webpack.config file
And also you can see some commands in package.json script tag
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --port=4200",
"build": "webpack",
"test": "karma start ./karma.conf.js",
"lint": "ng lint",
"e2e": "protractor ./protractor.conf.js",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet"
},
you can still run the project by using npm start
you can still build the project by using npm run build

Resources