I just want to publish a react component to npm, but found out it's so difficult. The file is simple, but with es6 syntax. what is the steps or solution to publish it to npm so that we can just install and run it with locally installed react? I have read this article http://chadly.net/2015/04/publishing-react-to-npm/, but it seems outdated and I failed by following it.
Use babel-cli to transpile the file to es5 and publish that file.
Put all your source-files in one folder, e.g. src and install babel and add build entry to your npm scripts (package.json/scripts): "build": "babel --out-dir=lib src".
No every time you call npm run build. The transpiled code will in the lib folder. In you index.js refer to this lib folder-folder.
Of course you can add build script to npm hooks such as "prepublish": "npm run build" or similar,
I wrote a full Medium story because I had the same issue as you and there is no information about it. Check it out: https://medium.com/#BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce
Related
I'm using create-react-app. When I run npm start (react-scripts start) it continuously builds the changes for me and does it magic. But what is the output folder for that? I know when I build it manually where the files go.
I want to use firebase emulator to serve the current version (the continuous build) of my react all but I don't understand where's the output folder or how to achieve it.
You could try this package https://github.com/Nargonath/cra-build-watch
Install it and add the script to your package.json
{
"scripts": {
"watch": "cra-build-watch"
}
}
and run it
npm run watch
more info here
https://ibraheem.ca/writings/cra-write-to-disk-in-dev/
and if you go to the react repo issue linked in the article you would find more workarounds
tl;dr
run npm run build, not npm run start
More Detail
react-scripts start runs webpack-dev-server internally. As a default setting, webpack-dev-server serves bundled files from memory and does not write files in directory.
If you want to write files with webpack-dev-sever, you could set writeToDisk option to true in your dev server configuration.
However, I dont think this is what you want to serve on firebase emulator. Webpack-dev-server does not build optimal app for production, and you also need to use react-app-rewired to customize dev server configuration in cra template.
What you want to do is npm run build to run react-scripts build, which builds optimized production app in /build directory.
My Repository Structure is
codebook
-packages
-clii
-local-api
-local-client
-lerna.json
-package.json
I installed local api to clii and local-client to local-api but for publishing i wanted to change the name of local-api and local-client so I changed local-api to #codebook/local-api and #codebook/local-client. And ran lerna bootstrap.
I was getting a npm ERR! code E404. So i deleted the node_modules in each subfolders. I thought lerna bootstrap would link the new files as well as install the packages. But it is'nt working. And now all the packages are missing from each sub repositories. I can't do a npm install in each of this repositories. What should i do to install all the packages?
If you are changing the package name of an internal dependency that you have already added to other packages, you need to change that package name in the dependent package.json files as well. Unfortunately I'm not aware of a way to tell lerna to migrate or "rename" a dependency in the project.
So if you changed local-api to #codebook/local-api you need to go into the package.json for clii and update local-api to #codebook/local-api as well.
That said: In my experience, lerna bootstrap is pretty buggy and 404s a lot. I do not know why. All of my issues with it were solved by using lerna for adding dependencies, and yarn workspaces to download and link dependencies. The difference being, lerna just adds to the package.json file while yarn does the downloading and symlinking work.
So the process here would be to add workspaces: ["packages/*"] to your package.json and add new deps via the following commands:
lerna add #codebook/local-api --scope=clii --no-bootstrap
yarn install
There is some license issue with one of the dependencies getting installed with react-scripts.
Project is created using CRA, so react-scripts is marked as dependency in package.json.
If I mark react-scripts as dev-dependency, since i don't need it for production, and install all the packages using 'npm install --production', I will not be able to use build script as react-scripts is not installed.
Browsing around this I see react-scripts should ideally be a Dev-dependency.
So just wanted to check if anyone can help here, how to use build script keeping react-scripts as Dev-dependency? is using webpack as a to bundle would be the only option here?
NPM and package.json initially were created for Node.js, which is intended to either run some scripts, or to run continuously. In this cases you might need some dependencies only when you are developing (for example some debuggers, or nodemon and so on), but don't need them in production.
In case of CRA, you don't need any dependencies on production, since you are building bunch of static files. Generally, you have some build pipeline, that will install all dependencies, build your static files and then transfer only built files to produciton (where only production dependencies may be installed again, or it can be another build step in pipeline). If you don't have such pipeline, you can install all dependencies, build on server and then delete node_modules.
I have a working application consisting multiple components created using create-react-app, each component is a separate app in itself again created using create-react-app.
All the components are ejected so that I could integrate it together.
Now, I want to publish the components to NPM/Private repository but as per CRA deployment guide, it doesn’t support publishing of CRA based components directly out of the box, it suggests using nwb, but I couldn’t figure out how to use nwb to publish ‘existing’ components.
I have also looked at the one of the medium post where it suggests using the babel-cli to generate the dist/build files but that’s failing for some babel configuration which works well otherwise.(sorry, don’t have link at the moment as I am posting this from cellphone).
Any help is appreciated.
You can do it by using babel-cli npm package which will compile your react application code and then you can publish it using npm publish command, the detailed steps are as follows.
Install the babel-cli package in your create-react-app using npm install babel-cli command.
Create .babelrc file and add following contents to use "react-app" preset provided by babel.
{
"presets": [["react-app"]],
}
Add distribute command in package.json using following code, this command compiles the code from src folder to dist folder. Generally, I do not include my test files in published library so the --ignore argument skips the tests files like *spec.js and *test.js, this argument is optional and you can remove --ignore spec.js,test.js if you would like to include test files in your published library. The --source-maps argument includes the source maps for the included source files :
"distribute": "set NODE_ENV=production&&babel src --out-dir dist --copy-files --ignore spec.js,test.js --source-maps"
Execute the command npm run distribute which will generate the files in dist folder.
Set private: false in package.json to make available for publish
Set main file of your distributed package using following command, in my case I directly use App.js
"main": "dist/App.js"
Add following code for publishing the package and provide repository related details
"publishConfig": {
"registry": ""
}
You can use npm run publish command to distribute your react app source code as library.
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.