For react-admin-demo is it compulsory to do complete build of react-admin.
As per documentation it goes through clumsy make process.
Have anybody installed the folder itself by just npm install and run?
Any hints on how that can be simplified, to fork and create my own project?
Reference: https://github.com/marmelab/react-admin/tree/master/examples/demo
This is a mono repository which includes many packages. It uses learn and yarn workspaces. You'll have to use yarn.
There are several scripts inside the main package.json file which can help you start contributing without make. Each package inside packages can be built by running yarn build inside its folder.
To build all packages in one command, you can run ./node_modules/.bin/lerna run build inside the root folder.
Related
I'm developing an npm package for custom React Hooks. And using yarn for package management. The custom hooks are in the src directory, and to prevent posting the wrong code to npm, I've created a new demo folder locally at the same level as src.
To test my hooks code locally, I bundled my hooks and used yarn link to link it in my demo project smoothly as if I installed it from the registry. And next I run yarn start in my demo folder to run my test project. But it reminded me Invalid Hook Call Warning in the Chrome console.
After reading this article I knew that it is because I used duplicate React, So I tried to this command: yarn link ../node_modules/react but it just told me
error No registered package found called "../node_modules/react".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
But when I tried to use npm link ../node_modules/react there is no error reported. I can start my test project smoothly.
But here comes the problem: I am using yarn for package management and it has its own lock file yarn.lock. If I want to run my test project, I had to run npm link ../node_modules/react, this step will generate a npm lock file which is a Redundancy for me.
So how can I use yarn link ../node_modules/react instead of npm link ../node_modules/react to link a same version React?
Here is the whole repository
I will assume this question is still relevant because I stumbled upon it while looking for the answer myself. I managed to figure it out eventually.
The yarn link docs state the following:
This command is run in the package folder you’d like to consume.
In order to create a link for React, you have to cd ../node_modules/react and then yarn link while in that directory. You can then use yarn link react from the other side to consume the linked package.
For the record, it doesn't look like it matters which side you create the link from (the library or the consumer) as long as the other side makes use of it.
I'm working on an NPM package right now.
The main code for the package (repo/src/maincode.js) has a few dev dependencies and a few dependencies needed to run it. When the user installs the npm package (through npm i) these dependencies will need be installed.
Now, that being said, I also want to create a react project that showcases this npm package, and have it live in the same repo, in an examples directory (repo/examples/react/app.js). This react app may have its own dependencies and dev dependencies, but I really don't want all of these to be forced onto the user when they're installing my npm package just to use in their projects.
How might I go about solving this problem? Is there a way to create a set of dependencies that are only installed if you are running a particular script, or running example code ?
You can give the examples directory its own package.json file and instruct folks who want to run the examples to cd into the examples directory and run npm i there. Any code in the examples directory that imports a module will look in its own node_modules before checking the node_modules in the parent directory.
The MarkoJS examples repository takes this approach and even makes it more granular. Instead of having a single package.json for the examples directory, there is a package.json for each separate example.
If you want, you can create a helper script in the main package.json for the user so they can do something like npm run build-examples and it will do the npm install for them as part of the process.
I have been tasked to maintain an existing React site. It appears that all .js and .jsx files are being compiled into one react-application.js file. I have made some changes to the code and need to move the code to staging. However I am not sure how to proceed. Being fairly new to React I am sure I have missed something here. Can someone please point me in the right direction?
Image of the root folder as requested:
https://i.stack.imgur.com/dcIh2.png
Image of the resources/assets/js folder:
https://i.stack.imgur.com/IaHew.png
So, there's two important files I see in the root directory:
package.json
gulpfile.js
package.json
If you're not familiar with npm, you're going to need to be. package.json lists all the npm packages that are required to build and run this project. Once you have npm installed globally, you're going to want to run npm install on the command line from the root of your project.
gulpfile.js
gulpfile.js is a script that should be executed by the task runner gulp. You're also going to want to have gulp installed and review the documentation to familiarize yourself with it. Your gulpfile.js will define one or more tasks. One of these most will likely transpile and bundle your .jsx files into a single browser friendly script. It most likely makes use of other npm packages to do so, which you also may need to familiarize yourself with.
You can run these various tasks by calling gulp [taskname] from the command line in the root directory. Quite likely there is a master task set to default which will run by simply calling gulp.
There's a pretty good chance gulp is also set to compile Sass and handle other tasks as well.
One more thing. The root directory also contains a .bowerrc. This would have been created by Bower, a package manager that was popular before npm. However there is no bower.json file, which I would expect to find.
This is a bit of a red flag for me. Hopefully, all of your dependencies are now included via package.json and whoever removed Bower just neglected to clean up the .bowerrc. But if your build process still depends on Bower assets, not having a bower.json is going to be a problem.
I want to contribute to an open source React Component and I'd like to use a fork of the project in my webpack bundle.
I am using yarn and I tried to install my fork using
yarn add github:Startouf/react-coverflow
However, when webpack tries to compile my bundle, it raises weird errors
ERROR in ./~/react-coverflow/main.js
Module not found: Error: Can't resolve './dist/react-coverflow' in '/Users/Cyril/dev/MyApp/client/node_modules/react-coverflow'
Did I miss something ?
EDIT : when I use the released package from npm, the node module folder contains
LICENSE README.md dist main.js package.json
When I use my fork, it seems like the project isn't compiled and contains
LICENSE README.md package.json src webpack.config.js
Makefile main.js site test
Seems like I'm missing a step... I though doing yarn add with a github fork would automatically make a release but seems like I'm wrong ?
Unfortunately, using a repository directly as source can result in execution error. This is because it's not bundled at all, while the package expects an prebuilt version existing in dist. The bundling scripts are often executed before publishing releases to npm.
Some workarounds are:
execute the prepublish step in the target directory (this depends on
what the project uses)
of course, using the published version is the best. create your own package on npm and upload it.
References: npm issue
The package should be updated to include a prepare step.
A prepare step does exactly what you want in all cases.
https://stackoverflow.com/a/57503862/4612476
You can add the prepare script in package.json#scripts yourself that runs the build. Npm and Yarn will then automatically run the prepare script on install directly from GitHub. You can then treat it like any other package and it will always just work™.
Don't forget the package.json#files section. See the linked answer for more details.
First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!
Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.