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.
Related
I have a React app which holds the code for a custom component that will be leveraged as a shared component in other apps. I've implemented a rollup.config.ts which outputs the following dist directory for the component:
|-dist
|--index.js
|--index.es.js
I'm creating developer documentation for the update process. Seems best to have developers test the updated npm package on a local copy of a consuming app before pushing the updated npm package code to the repo. Looks like npm install supports local directories and packages.
https://www.stefanjudis.com/today-i-learned/npm-install-supports-local-packages/
Looks like this ^^^ approach requires the defined package path to have a valid package.json. So how would you typically configure this? The following rollup.config.ts encounters an error and writes it to the log, although the specific error does not appear clear in the log file:
output: [
{
file:'package.json',
format:'json'
}
],
I'm assuming that the output config above (or similar) is required, since the url above says that package.json is required in the dist folder for npm install via local directory. What's the best way to automate inclusion of package.json into the dist folder?
Also, let's say that the shared npm package is named "user-manager" and that's how it's installed in my local ConsumerApp. What would be a good way to test the package updates via local consumer app?For example, should the documentation say something like:
Copy "dist" folder from user-manager project to top-level of
local ConsumerApp
Rename "dist" folder to "user-management"
Open git bash to that "user-management" directory and "npm install user-management"
Test app
If success then roll back ConsumerApp changes and push code updates from user-manager project
I'm trying to use the create-react-app in an existing app without using the default index.html built in that links the scripts generated by running yarn start. These files include /static/js/bundle.js, static/js/0.chunk.js, static/js/main.chunk.js, and /main.somehash...hot-update.js
I set INLINE_RUNTIME_CHUNK=false in my .env but no files ever get generated in the static folder when running yarn start.
You can either eject your project or use react-app-rewired to customize your webpack configuration. This way, you can modify the path to output js.
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.
I have written some react components.
I have a folder of ES6 files with multiple files :
components/A.js
components/Button.js
I wan't to import them like this in my futur project.
import A from 'bootstrap-styled/components/A';
I would like to create a npm package.
I need to export them in ES5 format using the SAME directory structure.
I don't wan't a single output file.
Is there any existing program that can do that ?
You need to have Babel installed in you project (I assume that it is already installed because without it you would not be able to run your ES6 in the browser. So I omit all the settings of Babel, just make sure that you have babel-cli in your project).
So all you need is:
babel components --out-dir dist
It will compile all your files from components to dist.
Than you can publish it to NPM with
"main": "dist"
in your package.json
If you are looking for automatisation of this process try this boilerplate project -
react-cdk.
It'll do the exactly you asking: compile ES6 to ES5 every time you run npm publish
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