Apply changes from linked npm modules without rebuilding - javascript

My webapp consists of two modules from separate git repos, with the following directory structure:
webapp/module1
webapp/module2
module1 depends on module2, so I've added the link:
cd webapp/module1
npm link ../module2
The module1 is main module, so I'm running webapp using npm start from there:
cd webapp/module1
npm start
start is configured in module1's package.json as follows:
{
"scripts": {
...
"start": "webpack-dev-server --open --progress --colors & npm run build:css -- -w",
"build:css": "node-sass src/style/main.scss dist/webpage.min.css --output-style compressed"
}
}
The problem is when I make a change to module2 source code editing its javascript sources - the change is not applied immediately to the running webapp instance. I need to execute npm run build manually:
cd webapp/module2
npm run build
build is configured in module2's package.json as follows:
"build": "cross-env WEBPACK_ENV=prod && npm run v:patch && webpack"
Only after this step the changes are applied to the webapp. Is there a way to get such changes to be applied automatically? I'm using npm version 5.6.0.

Related

Accessing the script of package.json of a npm package from our project package.json file

I created a tool and registered it on npmjs.com named Yattex. It script looks something like this
`
"scripts": {
"clean:reports": "rm -R -f cypress/reports && mkdir cypress/reports && mkdir cypress/reports/mochareports ",
"pretest": "npm run clean:reports",
"scripts": "cypress run",
"combine-reports": "mochawesome-merge cypress/reports/mocha/*.json > cypress/reports/mochareports/report.json",
"generate-report": "marge cypress/reports/mochareports/report.json -f report -o cypress/reports/mochareports -- inline",
"posttest": "npm run combine-reports && npm run generate-report",
"yattex-tool": "node yattex-tool",
"decorator": "node yattex-tool/test-decorators",
"test": "npm run decorator && npm run scripts || npm run posttest || npm run yattex-tool"
},
`
Now, in another project i installed the package and now i dont know what to write in scrips(test) to run the above test command which is in the node_modules/yattex/package.json file
I tried yattex and node node_modules/yattex/package.json
But it doesn't work. I'm a newbie and i cant find any solution...
If you add a property
"workspaces": ["./node_modules/yattex"]
to the package.json file in your other project, then npm test --workspaces will execute the tests both in your other project and in the yattex project (which is a "workspace" as explained on the npm help run page).
If you want to run only the tests for yattex, use npm test --workspace=./node_modules/yattex.

Custom NPM package - Custom command line command

I recently created an NPM package called Project_1 (which I installed in another of my Node.js projects called Project_2) using the command:
npm install --save ./path/to/Project_1
(Is there a better method to install a local package inside one other locally?)
So the packaje.json of Project_2 is as follows:
{
"name": "Project_2",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"dependencies": {
"Project_1": "file:../Project_1",
}
}
In the npm package I created (Project_1), the JSON package is as follows:
{
"name": "Project_1",
"scripts": {
"custom-serve": "http-server ./website --port 8888 -o"
}
}
When I am in the root of Project_1 I can launch from the terminal:
npm run custom-serve
And in this way I can execute my custom command.
I need to know how to call npm run custom-serve inside Project_2 (also from the command line) after installing the Project_1 package as an npm dependency in Project_2.
So, in the root of Project_2 I would like to be able to run npm run custom-serve so that the command written in the Project_1 library is triggered.
How can I do this? How should I set the JSON packages? Is there a best practice for doing this? Do I need to add special scripts in .js?
This is because I have noticed that always when installing npm packages they provide commands that can be launched from the root of the project in which they are installed.
NB: The command custom-serve is just an example. I would like to create some custom commands inside the Project_1 and i want to be able to call them inside the Project_2 after the npm install of the Project_1 package.
I have already tried to create a script inside the Project_2 like so:
"scripts": {
"custom-command": "cd ./node_modules/Project_1 && npm run custom-serve",
}
But it doesn't works.
Firstly, to answer your question if there's a better way to install a local dependency, there is via npm link.
Assuming the name in Project 1's package file is project-1, you can link it in Project 2 as follows (obviously using the paths that correspond to your setup):
cd ~/projects/project-1
npm link
cd ~/projects/project-2
npm link project-1
Secondly, if you want your package to expose a runnable command, you should configure this in the bin section of its package.json. The path should point to an executable file, so to reuse the npm script, you could use execute as follows
custom-command.js
const {exec} = require('child_process');
exec('npm run custom-serve');
And then add the bin section to the package.json of Project 1:
"bin": {
"custom-command": "./custom-command.js",
}
If you have an index file inside your Project_1, and you had Project1 as a dependency for Project2, you can just call the file and it will run the default start command:
In Project_1 package.json file:
{
"name": "Project_1",
"scripts": {
"custom-serve": "http-server ./website --port 8888 -o",
"start": "npm run custom-serve"
}
}
In Project_2 package.json file:
{
"name": "Project_2",
"scripts": {
"custom-command": "node Project_1"
}
}

Nodejs: How to prepare code for production environment

I'm a beginner developing with Nodejs and React.
Right now, I've got a first version of my web application which works correctly in development environment, but I'm trying to build a version for production environment but I've got this error
ReferenceError: document is not defined
The scripts of my package.json are:
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/bundle.js"
},
And I try to create the version for production environment with the command npm run start
I have been looking for information about the problem and it seems it's due because I have no Browserify my web application. But, I don't know how to do this correctly nor the steps to follow to do it correctly.
I am seeking a list of the steps required to build a correct version for production environment.
Edit I:
These are the static files generated with "build" script:
The React application is designed to be run in a browser.
When you run dev-webpack you are running an HTTP server and pointing a browser at it.
When you run build you are creating a static JavaScript file. You need to deploy it to a web server (along with the associated HTML document) and then point a browser at the HTML document.
You are currently trying to execute bundle.js with Node and not a browser.
You need to serve your index.html file. You can use serve to host the HTML file.

How to Build NextJS Project on Local without Now

I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......
After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.
You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.

Nodejs - npm start & npm build both do not work?

this is a snippet from my package.json
"scripts": {
"start": "mkdir BigDirectory",
"build": "mkdir BigDirectory"
},
I've noticed that npm build simply goes to the next new line in terminal (without creating a directory)
While npm start works and creates the "BigDirectory"
Why is npm build non-responsive? Am i perhaps allowed only one single script in my package.json?

Categories