Node_modules on publishing a react-bootstrap website - reactjs

I'm developing a react-bootstrap website and I'm wondering if I should include the node_modules folder when i will publish the site on a web hosting platform, or there is another way?
I never published before a website with a lot of dependencies

usually it's bad practice to upload node modules! there's no need to upload node_modules folder to server, you can install them using npm install or yarn install in case your are using yarn. it will create node_modules folder with all the dependencies which you have installed make sure your all dependencies are added in package.json

It depends on your approach , if you want to create simple SPA you could run "npm run build" which will give a build folder and once you uploaded those file on the server and point your requsts to index.html
You wont be needing node_modules , BUT having a differant approach , having SSR maybe then yes , you would need to start your project on the server which will need node_modules as well.

Related

Deploy React Project wiht FileZilla

I wanted to deploy a react project. I used the npm run build command to create a build folder for deployment. Somehow, i dont know where the output ont this build folder is. Can someone explain to me, how i should proceed?
npm run build or yarn build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed.

Create and Publish a node_modules package without it's own node_modules

I had created a project using ReactJs and Material UI
And then I was building and publishing the whole project
When I want to install this module in client-side with
npm install clientsso/BuildTest
it workes fine, but it comes with its own node_modules folder
so I force build to create a single file in another folder and i publish this folder
build": "./node_modules/.bin/babel src --out-file BuildTest/index.js
but when I re-install, it always asks for "Material UI", modules used by this custom package
is there any solution to force the client to install all necessary modules for this package
in his folder "./node_modules/BuildTest"
Thanks for your help

how to install all dependencies packages globally?

When I create react app then there's create node_modules with more than thousands of packages under app/project folder and if I create more than ten apps then node_modules folder creates for each app with thousands of packages. so this way repeating same node_modules folder with thousands of packages which is not a good idea I think. After a long time system getting slow down with millions of files and folder created by npm based projects. if node_modules run from globally then app/project will install quickly and no one package will install duplicated/repeated.
I want to install a node_modules folder globally with thousands of packages instead locally(under app folder) when create/install any app/project.
I have tried all way using global command Like:
npm -g install
yarn-g install
Let me explain what exact i mean:
Suppose, If I create three react app
npx create-react-app my-app1
npx create-react-app my-app2
npx create-react-app my-app3
after setup all app, we get below like that node_modules with packages:
my-app1
-node-modules->p1,p2,p3....p999, so on..
my-app3
-node-modules->p1,p2,p3....p999, so on..
my-app3
-node-modules->p1,p2,p3....p999, so on..
See all same packages install multi times and repeating
I think this is not the right way for project folder but if you want to try below line try using (../)
"start": "node ../node_modules/react-native/local-cli/cli.js start --reset-cache",
In your package.json file If you want to more detail please check this link
thanks
npm install -g start-react-app
-g flag is used for globally

is it safe to uploud np-modules folder in react native project to github?

whenever I sync a react native project in GitHub , GitHub ignores the npm-modules folder to sync.I was wondering why GitHub has this approach, is there any problem to include this folder in our GitHub project? I know there is ignore line in GitHub for this folder and also I know I can easily install npm module but sometimes you need to change some parts directly from library and those modifications cannot be install again by npm install.
Github doesn't ignore anything, it is basically the same as git and it doesn't understand the structure of a react-native project.
The folder is ignored because it's in the .gitignore created by the react-native CLI.
To include nodes_modules in your git, just remove the line node_modules/ in your .gitignore and add/commit. You'll then be able to push your node_modules.
Uploading the node_modules folder is basically safe, but most people ignore it because you can generate it by npm install. That's why react-native put it in the default .gitignore.
See also Should "node_modules" folder be included in the git repository for whether you should include this folder or not.
Answer to the edit:
I know there is ignore line in GitHub for this folder and also I know I can easily install npm module but sometimes you need to change some parts directly from library and those modifications cannot be install again by npm install.
(It's not Github, it would be the same with another git server.)
If you decide not to include node_modules, and want to change a library, you can fork the library on Github and install your fork with npm: npm install <yourUsername>/<yourRepository> (if it's public).

How to deploy MEAN Stack to web host

I have a node API and an angular front end project (via grunt, bower, yeoman flow structure) as two separate github repositories. I am trying to push them both to production through Heroku. Coming from a rails bg where everything in the app exists in the same project directory, and you only have to push one directory, how would you do this? Should I push both projects as separate heroku projects or is there a best practice out there? I'd appreciate any and all advice, thank you in advance.
Firstly, I would review the official Heroku doc on deploying nodejs apps
If you have two projects, you will probably want to deploy them as different heroku apps.
The key here is going to be making sure your package.json is set up correctly. Make sure all your dependencies are correct and present, and your package.json points to your node server script. Make sure you have your dev dependencies like grunt separate from your production dependencies also, as these don't need to be deployed to production. If this is just a demo app, you can have heroku install all your scripts (like angular) simply by including them in your package.json. When you push your app, it will run an npm install on your package.json and install it the dependencies.
There are a few ways you can deploy also - via the heroku cli, a github link, or a dropbox link. I haven't personally used the cli much, but I have found the other two convenient to use, especially if you are already pushing to github.
One key thing too is that if you need to install dependencies with bower, you should know that heroku DOES NOT run bower install on it's own. You can tell heroku to run it by adding the following to your package.json:
"scripts": {
"postinstall": "bower install"
}
This will cause it to run a bower install after npm install finishes.
Also, if you haven't done so already, you'll need to set up your database somewhere with a 3rd party provider (like mongolab or modulus).

Resources