My use case is the following. I make a production build like this:
cross-env API_URL=my_url yarn build
and then run it like this:
yarn start:prod
and it all works ok. But what I want to be able to do is:
yarn build
and then start it like:
cross-env API_URL=my_url yarn start:prod
so that I can test the same build against different backend environments. Is this doable?
Right now, if I try it, the API_URL doesn't get picked up after build and it defaults to the one I have in an .env file (because I support a default case). I'm aware that Webpack needs the env variables during build, but maybe there's a workaround I'm missing.
My build script, inside package.json is:
cross-env NODE_ENV=production env-cmd .env.prod --no-override --config config/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout
and my start:prod script is:
cross-env NODE_ENV=production env-cmd .env-prod --no-override node server
Related
I've always used just npm and never yarn/webpack explicitly. I need to run the code from this repo:
https://github.com/looker-open-source/custom_visualizations_v2
Like a dev server or something to ensure it's serving the files properly but I don't see a "run" like npm run start. Does this just not exist with yarn? It feels like this code should work as is and I shouldn't have to add anything.
EDIT: I've now tried yarn run watch but it just seems to build the code again and not actually host anywhere
npm run somecommand just looks up in the "scripts" field of package.json for the key
somecommand and executes the value in the terminal.
So npm run start basically runs the start script from package.json
The same thing is done using yarn via simply yarn start
In the linked repo, there isn't a start script in the package.json, rather a watch script, so you should be able to run it with the below steps:
yarn to install dependencies after cloning the repo to local (similar to npm install)
yarn watch to start the webpack server (analogous to npm run watch)
Edit:
Turns out the watch command is just setting up webpack to watch for changes and recompile the project every time there is a change.
To run a development server, you will need to add another script preferably with name start and use webpack-dev-server
So the package.json has entries like:
...
"watch": "webpack --config webpack.config.js --watch --progress",
"start": "webpack-dev-server --config webpack.config.js",
...
Then running yarn start should open a dev server at localhost:8080
I am trying to set up my project based on MonoRepo for that I have used lerna.js now as far as I know lerna.js work as follows.
For Dev
Create lerna.json and update all packages and workspace details to package.json and lerna.json
run yarn or npm client as usual you do.
any folder inside packages/ will be treated as node_module so you can directly call them.
Now running my application as dev works fine but when to build or transpile my es6 code using Babel for production than lerna.json doesn't work right following are problems which are making me confused about how to use it.
Do I have to Publish all my packages to npm for using them in production?
running lerna Bootstrap links packages but when I view my package inside node_modules it still contains es6 code..due to this node application throws an error for using import statement which node didn't understand unless you use experimental flag.
Following is the Example:
lerna.json
{
"packages": [
"packages/*"
],
"version": "independent",
"npmClient": "yarn",
"useWorkspaces": true
}
packages Directory
packages/
context/
dyna_modules/
www/
npm scripts
"clean": "lerna clean --yes && rimraf node_modules && rm -rf package-lock.json yarn.lock",
"build::js": "babel ./packages --out-dir ./build/packages/ --ignore node_modules",
"build::nonjs": "babel package.json prisma.yml Dockerfile docker-compose.yml .env --out-dir ./build --copy-files && babel ./packages/routes --out-dir ./build/packages/routes --copy-files",
"build": "rm -rf ./build && mkdir ./build && npm run build::js && npm run build::nonjs",
"dev:nodemon": "DEBUG=*,-babel,-babel:*,-express:*,-nodemon:*,-nodemon,-snapdragon:*,-finalhandler,-follow-redirects nodemon -L --exec babel-node --inspect index.js",
"dev": "yarn dev:nodemon --ignore-engines",
"prestart": "npm run build && lerna bootstrap",
"start": "cd ./build && node ./packages/www/index.js",
Problem
Running yarn start always fails with error for using the Import statement. During the inspection, I found out that all my packages/modules inside node_module contain es6 syntax instead of a trans-piled code.
I am trying to structure my project based on lerna.js now as per documentation
everything is setup and is working fine when run as development server following is directory
structure.
index.js
packages/
package1
package2
index.js => contains: import Package1 from 'package1' <--- Package1 etc path is managed by lerna.
package3
DEV & BUILD Command
# Build
"build::js": "babel ./packages --out-dir ./build --ignore node_modules",
"build::nonjs": "babel ./package1 --out-dir ./build/package1 --copy-files",
"build": "rm -rf ./build && mkdir ./build && npm run build::js && npm run build::nonjs"
# Dev
"dev:nodemon": "DEBUG=*,-babel,-babel:*,-express:*,-nodemon:*,-nodemon,-snapdragon:*,-finalhandler,-follow-redirects nodemon -L --exec babel-node --inspect index.js",
"dev": "yarn dev:nodemon",
Now runing dev command on my project works fine but when files are build for production than babel doesnt change Package1 path to its absolute location just like regular module.
...
var _Cache = _interopRequireDefault(require("package1")); // <<---- how to get ride of this problem. as. node tires to locate module but there is no package1 in node_modules its just regular modules which is inside packages/ directory. now running it on dev simply works.
I'm having the following code in my package.json to start the script while developing:
....
"scripts": {
"start": "nodemon src/index.js --exec babel-node --presets es2015,stage-2"
},
....
Now I want to deploy it to production. When I run npm start everything works fine. However, it will shut down when I close the terminal. So how can I use it with PM2?
This is what I've tried:
pm2 start src/index.js -x babel-node -p es2015,stage-2
You can actually use npm start if you like:
$ pm2 start npm -- start
That said, for production deployment I would strongly recommend a) using a config file for your pm2 startup stuff (so you can bundle environment variables and such) and b) precompiling your assets as a build step rather than on startup.
I'm experimenting with setting up a dev environment to use NPM only, without the use of grunt.js or bower.js.
I followed this tutorial: http://beletsky.net/2015/04/npm-for-everything.html
I'm using nodemon to watch my .js and .scss files for changes which restarts the node server. So in my package.json file, under scripts I have
scripts:
"watch-js": "nodemon -e js --watch public/js -x \"npm run build-js\"",
"watch-sass": "nodemon -e scss --watch public/sass -x \"npm run build-sass\"",
"watch": "npm run watch-js & npm run watch-sass"
But when I run npm run watch it only watches for the public/js files to change. And it triggers a build accordingly.
But it won't watch for the sass files.
Versions:
node v0.10.36 nodemon v1.4.1
I also include a build script which if I run compiles the sass to css, so my build-sass script should be ok
"build": "npm run build-js & npm run build-sass",
"watch": "npm run watch-js & npm run watch-sass"
If you are using windows, you might be encountering the windows problem
Because npm is reliant on the operating systems shell to run scripts commands, they can quickly become unportable. While Linux, Solaris, BSD and Mac OSX come preinstalled with Bash as the default shell, Windows does not. On Windows, npm will resort to using Windows command prompt for these things
If so, you can try using parallelshell or npm-run-all for better cross platform support.
This works for me in Mac OS
Install nodemon
npm install --save-dev nodemon
Install npm-run-all:
npm install --save-dev npm-run-all
In package.json add two scripts:
"startn": "nodemon ./app.js",
"watch-jscss": "gulp watch"
Where 'app.js' is your server file
"gulp watch" can be replace by whatever task is doing a sass watch
In the console:
npm-run-all --parallel watch-jscss startn