I want to build a small js plugin, and I want to try that with ReactJS.
ReactJS recommends installing using npm and browserify.
In my experience with Ruby on Rails, there are always a lot of things to install, and using Windows introduces additional problems.
With Ruby it is Rails Installer. What is JS equivalent of Rails Installer? i.e. a tool that lets me install all necessary packages with one step?
I did a little bit of search, find that I need to install:
NodeJS, NPM
NVM
Webpack or Browerify
Babel
I think there may be others that I need.
To start the project you need node and npm because webpack, browserify and babel is npm packages.
The only way to install all packages in one step is to install package that actually depend on all packages you need. There is a lot of ReactJS starter kits in github like this https://github.com/kriasoft/react-starter-kit
I, personally recommend you doing such a things by yourself - its not a big deal if you understand what you want. In the root of all nodejs projects there is a file package.json every time you need a new module (package) just type npm install -S <module_name> in the root directory of your project.
This new module appears in node_modules directory and because of -S flag it name also will be stored in dependencies of your project in package.json file so that in the future you can just type npm install to install all dependencies (aka modules/packages) of your project.
Related
Is it possible to install a yarn dependency as an editable dependency?
I'm looking for something like python pip's:
pip install -e
For local development of a library. My goal is to see changes in a package I'm developing while simultaneously using it in another package.
You can directly edit the files in node_modules and changes there are reflected immediately, but also overwritten when yarn decides to update the module. Note, that some files need to be built first or might be a bit tricky to edit (minified / transpiled build artefacts). You can also install the module directly from GitHub, if this is easier for your development process.
Apart from that, there is no such thing as "editable" dependencies in npm / yarn.
At my organization, we are trying to create a monorepo of react components so they can be used on several sites.
We currently have a repo called react-components hosted on bitbucket and we wanted to set it up as a monorepo using lerna.js so the structure would look like
packages
package_1
package.json
dist
package_2
package.json
dist
However we don't host our npm packages on a registry but rather bitbucket and install them from there
so I'd like to be able to install each package into our websites via package.json like
"#company_name/react_components/package_1": "git+ssh://git#bitbucket.ds.company_name.com:7999/np/react-components.git#personal/jdaly/testBranch",
however I don't think you can have that path in a package.json
so it should be more like
"#company_name/react_components": "git+ssh://git#bitbucket.ds.company_name.com:7999/np/react-components.git#personal/jdaly/testBranch",
and import like
import package_1 from "#company_name/react_components"
is it possible to set up a monorepo without using a package registry and just import all the monerepo packages via a git link? Haven't found much information on the web
I followed this tutorial https://blog.npmjs.org/post/186494959890/monorepos-and-npm
But you're still importing your modules/packages via a package registry rather thank installing via a git link
After I build my packages I push them to the repo
and in my website package.json I am referencing it like so
"#company_name/react-components": "git+ssh://git#bitbucket.ds.comapany_name.com:7999/np/react-components.git#personal/jdaly/firstCommit",
and when I go to node_modules the structure is
node_modules
#company_name
react_components
packages
package_1
package_2
package_3
lerna.json
package.json
when it should be
node_modules
#company_name
react_components
package_1
package_2
package_3
Any help appreciated
To anyone who stumbles upon this question - the answer is simple. In order to use lerna and create a monorepo system you need to have a package registry. That could be NPM or another product like https://verdaccio.org/ which is essentially a package registry you can use locally
Try the following:
npm install git+ssh://git#bitbucket.org/{user}/{repository}.git
Sources:
npm-install-modules-from-bitbucket-private-repositories
git-urls-as-dependencies
How-can-I-install-an-npm-package-from-my-bitbucket-repository
For some, this will suffice:
You may install packages from the same monorepo, without installing from a registry, by referencing the folder in the same repo or a tarball built in a separate folder in the same repo.
Examples:
npm install ../package_1
npm install ../package_1.tgz
Reference: https://docs.npmjs.com/cli/install
See npm install <folder> and npm install <tarball file>
However, consider carefully before going this route for production codebases intended to be long lived. This is excellent for quick and dirty solution w/o using registry, but consider...
How you will support multiple versions as packages produce backward-incompatible changes (major version bumps)
How will your packages be built through your build CI/CD pipeline
When installing anything via npm, it downloads dozens of not needed files. Usually I am looking for a library final build, a *.min.js file or anything like that but the rest is useless.
How do you handle all these useless files? Do you remove them by hand or generate the final app with any build tool like gulp or grunt?
I'm quite confused as I have plenty of npm modules installed in my webapp and the folder size is about 50 megabytes but it could be 2mb only.
npm install --production
Just doing an npm install brings in both development and runtime dependencies. You could also set the ENV to production globally for the server: npm config set production.
See this github issue. Note that this won't get you only the final minified build of everything, but will greatly reduce the bloat. For instance, a library might rely on babel-cli, babel-preset-es2015, and uglifyjs to be built (devDependency), but you don't need any of that if it also includes the transpiled minified file.
Managing Packages
For front end non-development packages I prefer Bower. It maintains the minified and non-minified version of your packages.
Build Tool
Use either Gulp or Grunt. Gulp would be my tool of choice.
Gulp task that will greatly improve your code are:
minification of both css and js
optimization/compression of images
concatenation and caching to reduce the number of calls to the server
package versioning
automatic injection of project dependencies
automatic injection of external dependencies
static analysis of js and css
automatic builds on code changes
deployment
testing
Node
If you can, leave to node all your development tools and leave to bower all your release plugins. Most node packages that are used in released apps have a bower installation counterpart.
Edit
Don't delete anything from Node manually as you don't know which packages have other packages as dependencies. If you are afraid that you may have junk in there, use npm rimraf to delete the node_modules folder, and then run npm install. Most importantly check your package.json for unnecessary saved packages.
Is it ok to have a node.js project with no package.json? The ones I see on the internet all come with package.json
What is the effect of having no package.json?
How is package.json created in the first place? Is it created automatically? I am wondering why I do not have package.json
Fundamentally, package.json is a meta file for your application. It lists all the configuration of your application.
What is the effect of having no package.json?
Nothing as far as you're running all your code locally and have no requirement for deployment whatsoever.
Let's setup a scene for you to understand this better.
Imagine that you wrote a brilliant application using node. Now all the chicks in your surrounding want it to play with. It is so fantastic!
Now you want to give it to them and during the development process you `npm install`ed so many things that your project grows beyond 4TB size.
There is no data storage device available to ship that huge code base.
Then the girl of your dream said I want it and I want it now. So you begin searching for app deployment process for node applications.
That is where you stumble upon a magical thing called package.json.
So what you do is you list all your npm installed modules under dependencies property. Then you delete node_modulesfolder, add package.json and commit the entire damn thing in github. Even the .zip file is of 10MB
Then she gets the code.
Types in npm install && npm start (which will install all the dependencies from the package.json` and start your application)
If you have package.json however, that is where you specify all your dependencies.
Using --save flag of npm install
Example.
npm install express --save
How is package.json created in the first place? Is it created automatically?
You can manually create a text file and save it as package.json
OR
A more sophisticated way is to use the command
npm init
I am wondering why I do not have package.json
Me too! :)
You're most probably following a tutorial that doesn't emphasize on initial configuration of the project OR the author of those tutorials presume that the reader has all the fundamentals down to begin with.
It is created automatically if you write npm init.
Then, every package you add using npm install packagename --save will be added to the dependencies list.
You need package.json so that when you want to use your project on another machine you don't have to copy all node_modules, but only your .js files you have written, assets and package.json. You can then run npm install command and it will automatically download and install all the required modules (found in the list of dependencies inside package.json).
You can also manually create or edit it, but it's easier to add --save when installing a module so you don't have to worry about package versions and stuff like that.
Also if you want to create a npm package, an open source project or stuff other people will use, it's either required or the norm to have this package.json file describing your project.
package.json is npm file, if you don't use npm you will not have this file, npm is a great tool if you want to use external libraries in your project but if you don't need it (which is very not likely unless you are doing something very simple), you don't need package.json file too.
To generate package.json file initialize npm in your project using npm init
possible reason thus it exist is you maybe you enter a wrong command like npm i -y, you must initialize the project first, just enter a command npm init -y
Welcome.
Well, if you are running it on your local machine, it's fine. now to answer your last question, package.json is not created automatically.
the npm command npm init -y creates the 'package.json' file. It basically makes sharing your code and installing your codebase easier.
I am a node newbie and am somewhat confused with the whole "install" thing.
What is the difference between install, and install -g?
Can something installed with install -g be accessed anywhere, or does this make it available to the Node server but not your application? Is there any reason to use one, and not the other?
Cheers
From the node.js blog:
If you’re installing something that you want to use in your program, using require('whatever'), then install it locally, at the root of your project.
If you’re installing something that you want to use in your shell, on the command line or something, install it globally, so that its binaries end up in your PATH environment variable.
So for example, lets say you wanted to install the Grunt CLI. Odds are you'll use Grunt in multiple projects, so you'll want to install that globally using -g.
Now lets say you're working on a project and your project is going to require a module such as Express. You would cd to your projects root directory and install the module without -g.
Here is a more in depth explanation.
install means the module will be created in your local node_modules folder which is highly recommended for anything your application relies on (for versioning, amongst other reasons).
install -g means install the module globally on your machine. This is generally only recommended to use with modules that perform some task unrelated to the execution of your application.
Simple examples of this are Yeoman generators, the Express generator, PhantomJS, etc.
There is an official blog post about it here
The only difference is npm install mod will install it in your local directory. Let's say you are working in 'projectA' directory. So
> npm install mod
will install "mod" in
> projectA/node_modules/mod/
so any .js file inside projectA can use this module by just saying require('mod')
whereas 'npm install mod -g` will install it globally in the user's node module directory. It will be somewhere in
> /usr/bin/npm/node_modules/modA
you can use this module anywhere in any of your project, in addition to that if there is any terminal command is there in 'modA'. It will be accessible from you terminal directory.
> modA --version
> version 1.1