How to publish React-Native component to NPM? - npm

What are the steps to follow publish React-native component to npm?
Am trying to publish sample component in NPM.
Do we need to build that before?
if yes, how?
Please can any one tell in detail along with the commands?

No you no need to build, just put android native code in android and ios directory and a index.js in root to refreance them, then
Add readme
give proper versioning
give proper name
Like this in package.json
{
"_from": "package-name#0.1.3",
"_id": "package-name#0.1.3",
"_inBundle": false,
"_location": "/package-name",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "package-name#0.1.3",
"name": "package-name",
"escapedName": "package-name",
"rawSpec": "0.1.3",
"saveSpec": null,
"fetchSpec": "0.1.3"
},
"_requiredBy": [
"/"
],
"_spec": "0.1.3",
"author": {
"name": "Your name",
"email": "your#gmail.com"
},
"bugs": {
"url": "https://github.com/bug/issues"
},
"dependencies": {
"prop-types": "^15.6.0"
},
"description": "description about pacakge",
"homepage": "https://github.com/#readme",
"keywords": [
"react-native",
"react",
"dnd"
],
"license": "MIT",
"main": "index.js",
"name": "package-name",
"peerDependencies": {},
"repository": {
"type": "git",
"url": "git+https://github.com/package-name.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"version": "0.1.3"
}

Related

Run an NPM script inside every package in an NX project's library

I'm using NX to manage a React design system mono-repo. I want to create my components within an NX Library and am currently looking into creating a Node package which will run the CSS for each component through PostCSS to get it production ready.
I've tested my PostCSS Node package in isolation and I know it's doing what I need it to to the files, however I'm having trouble working out how to configure the NX repo to run an NPM script in each component's package.json. A component such as my Button component has a package.json like so:
{
"name": "css-components-button",
"version": "0.1.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"prepack": "tools-postcss 'lib/**/*.css' dist/"
},
"dependencies": {
"tools-postcss": "file:.yalc/tools-postcss"
}
}
In the CSS Components Library the project.json file looks like this:
{
"name": "css-components",
"sourceRoot": "libs/css-components/src",
"projectType": "library",
"tags": [],
"targets": {
"lint": {
"executor": "#nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["libs/css-components/**/*.{ts,tsx,js,jsx}"]
}
},
"build": {
"executor": "#nrwl/rollup:rollup",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/libs/css-components",
"tsConfig": "libs/css-components/tsconfig.lib.json",
"project": "libs/css-components/package.json",
"entryFile": "libs/css-components/src/index.ts",
"external": ["react/jsx-runtime"],
"rollupConfig": "#nrwl/react/plugins/bundle-rollup",
"compiler": "babel",
"assets": [
{
"glob": "libs/css-components/README.md",
"input": ".",
"output": "."
}
]
}
},
"test": {
"executor": "#nrwl/jest:jest",
"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
"options": {
"jestConfig": "libs/css-components/jest.config.ts",
"passWithNoTests": true
}
},
"prepack": {
"executor": "#nrwl/workspace:run-script",
"options": {
"script": "prepack"
}
}
}
}
In particular I've added a "prepack" custom target which I'm trying to use to run a "prepack" NPM script in each component's package.json. Currently when I run nx run css-components:prepack in the Terminal I get **error Command "prepack" not found.**
Would really appreciate some help with this. Any ideas?

Express server is not deploying properly in Vercel

This is the first time, I tried to deploy my express server on Vercel. But, there are some issues probably. It didn't deploy correctly, I'm not sure why. However, localhost is running successfully. Getting 500: INTERNAL_SERVER_ERROR everytime.
I don't have any .envfiles as it's a practice project.
What I have tried:
package.json
"name": "assignment-1",
"version": "1.0.0",
"description": "In this project, I have written the first assignment of Programming Hero.",
"main": "index.js",
"engines": {
"node": "14.x"
},
"scripts": {
"start": "node index.js"
},
"keywords": [
"server",
"javaScript",
"node",
"express"
],
"author": "Riyad Hossain",
"license": "ISC",
"dependencies": {
"express": "^4.18.1"
}
}
vercel.json
"version": 2,
"builds": [
{
"src": "./index.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/"
}
]
}
Here is the response I found:

Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-import' (Vue 2)

I create my first npm package. I published it on npmjs and encountered the error of the lack of the 'postcss-import' module after installing the package in the project and running it. Tell me, where and in which file may the problem be? I tried all the ways and nothing works.Maybe something is wrong with these files?
This is the 'package.json' file of my package
{
"_from": "some_package",
"_inBundle": false,
"_integrity": "sha512-***",
"_location": "/some_package",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "some_package",
"name": "some_package",
"escapedName": "some_package",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/some_package/-/some_package-1.0.1.tgz",
"_shasum": "***",
"_spec": "some_package",
"_where": "/home/user/vue/projects/package_name",
"author": "",
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"bundleDependencies": false,
"dependencies": {
"vue": "^2.6.5",
"vue-browser-detect-plugin": "^0.1.5",
"vue-element-resize-event": "^0.1.0"
},
"deprecated": false,
"description": "A Vue.js project",
"devDependencies": {
"postcss-import": "^11.0.0",
"postcss-loader": "^2.1.6",
"postcss-url": "^7.2.1"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"license": "ISC",
"main": "src/main.js",
"name": "some_package",
"private": false,
"scripts": {
"build": "node build/build.js",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev"
},
"version": "1.0.8",
"repository": {
"type": "git",
"url": "git+https://github.com/user/some_package.git"
},
"bugs": {
"url": "https://github.com/user/some_package/issues"
},
"homepage": "https://github.com/user/some_package#readme"
}
This is the '.postcssrc.js' file of my package
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {}
}
}
You can try:
npm install --save-dev postcss-import

how to run 2 watch tasks in VS code?

I want to run 2 npm scripts in parallel, but this VS Code only runs the first task and stops there. How can I solve it?
My tasks.json is as below:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"suppressTaskName": true,
"args": [
"run"
],
"tasks": [
{
"args": [
"gulp"
],
"taskName": "gulp",
"isBuildCommand": true
},
{
"args": [
"babel"
],
"taskName": "babel",
"isBuildCommand": true
}
]
}
On Windows, the NPM package "concurrently" may help you.
In the package.json:
"scripts": {
"gulpbabel": "concurrently \"npm run gulp\" \"npm run babel\""
},
Then in tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "gulpbabel",
"isBackground": true,
"problemMatcher": [
"create_one_for_gulp",
"create_another_for_babel",
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Ideally (but not required), you also need to create two problem matchers: one for the gulp task and one for babel. They should be able to extract error details from the merged output and to detect when the respective task's watcher fires/stops (so that VS Code can display the rotating '\' in the status bar).
I don't believe you can do both tasks at once. Instead you can do this from npm.
In the tasks.json file:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"suppressTaskName": true,
"args": [
"run"
],
"tasks": [
{
"args": [
"gulpbabel"
],
"taskName": "gulpbabel",
"isBuildCommand": true
}
]
}
In the package.json file if you are on windows:
{
"name": "stacktest",
"version": "1.0.0",
"description": "",
"scripts": {
"gulpbabel": "gulp & babel"
},
"author": "",
"license": "ISC"
}
In the package.json file if you are on unix/linux/mac:
{
"name": "stacktest",
"version": "1.0.0",
"description": "",
"scripts": {
"gulpbabel": "gulp && babel"
},
"author": "",
"license": "ISC"
}

Browserify Cannot Find Module package.json

When I try to run browserify I get the following error:
Trace
at /test/node_modules/browserify-shim/lib/resolve-shims.js:216:17
at /test/node_modules/browserify-shim/node_modules/find-parent-dir/index.js:16:26
at Object.cb [as oncomplete] (fs.js:168:19)
Error: Cannot find module 'package.json'
What my test folder looks like
/test
->/node_modules
->index.js
->jquery.js
->package.json
What my package.json looks like
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "./index.js",
"browser": {
"jquery": "./jquery.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery": "$"
},
"repository": "",
"author": "",
"devDependencies": {
"browserify": "^3.30.2",
"browserify-shim": "^3.2.2"
}
}
Any ideas?