We're using Storybook platform to build UI components and pages in isolation. According to Storybook documentation, an npm package can be published with npm publish command after it's been built. But first they say that it needs to be built with this command:
{
"scripts": {
"build": "cross-env BABEL_ENV=production babel src -d dist"
}
}
This creates dist folder which looks like this:
My issue is that it doesn't include any .css or .json files that are part of the project. So I have to move them there manually.
Any idea how can I configure the project to include them automatically so I don't have to do it each time I run the build command?
Related
I have a TypeScript project with this structure:
root
src
index.ts
package.json
dist
index.js
package.json
This will be hosted in Azure Web Apps. Currently I have my start script more or less like this:
"start": "ts-node index.ts"
I would like build to dist/ folder and have the script be:
"start": "node index.js"
As I will only be deploying contents of dist/. Grunt is used to build/copy (I've found this package called grunt-replace but I don't know if that's a good approach).
Is there any way to achieve this, or do I need to restructure dist/? The only other production TypeScript/Node.js project I've worked on is an Azure Function which leverages azure-functions-core-tools' func host start from dist/.
The package.json of an Angular library defines the following scripts:
"scripts": {
"build": "node ../../node_modules/#angular/cli/bin/ng build dining",
"watch": "node ../../node_modules/#angular/cli/bin/ng build dining --watch",
"postbuild": "node copy-assets.js"
}
The postbuild script is executed successfully when I build the library: npm run build
but NOT when I call the watch script npm run watch:
Built dining
Built Angular Package!
- from: C:\[...]\projects\dining
- to: C:\[...]\dist\dining
Compilation complete. Watching for file changes...
"dining" is a angular library created by running npm run ng generate library dining.
copy-assets.js copies the library's assets folder to the dist folder.
Node.js version is 12 and npm version is 6.9.0.
How can I have the project built and watched for file modifications and the postbuild script executed in one command?
In a nodejs express.js application, and trying to build the app using babel for cross browser compatibility.
package.json scripts:
"scripts": {
"start": "node dist/app.js",
"build": "babel src -d dist"
}
On running npm build and check my build folder everything builds correctly except my non-js files like [.html,.css,.ejs]. At the moment just copied those file to the build folder in their respective sub directories and everything works fine.
I have even tried
"build": "babel src -d dist --ignore *.css,*.ejs,*.png,*.jpg"
Is there a way to do this in a better way instead of copying the non-js files. Thanks in advance any help will be highly appreciated.
If you have non-JavaScript files in the source directory that should be automatically copied to the output location when the command is run, simply add the --copy-files flag.
babel src -d dist --copy-files
The flag doesn't take any arguments and will copy all non-JS files over.
I am trying to setup WebStorm with Flow typing for a Node.js project.
I have it all working fine with NPM scripts but would like to integrate with the IDE.
Here is the scripts portion of my package.json:
"scripts": {
"dev":
"watch --wait=1 'flow-remove-types src/ -d lib/ --all --pretty' ./src/ & nodemon ./lib/server.js",
"start": "npm run flow:build && node ./lib/",
"lint": "eslint src/**",
"test": "npm run flow:build && jest lib",
"coverage": "jest --collectCoverageFrom=src/**.js --coverage src",
"flow": "flow",
"flow:check": "flow check ./src/",
"flow:build": "flow-remove-types ./src/ -d ./lib/ --all --pretty",
"flow:deps": "flow-typed install",
"flow:watch": "flow-watch"
},
Now if I modify the run configuration for a test and:
change the src directory to lib
specify a before launch, run NPM script 'flow:build'
then I can run that configuration.
I still have two problems.
Debugging will not stop on a breakpoint
If I hit the arrow in the source code gutter to run the test, it creates a new config which runs against the flow source and fails
Does anyone have Node.js and flow working well together in WebStorm?
You can use --sourcemaps and -pretty flags:
flow-remove-types --pretty --sourcemaps --out-dir out/ in/
The -m or --sourcemaps flag adds sourcemaps files to your /out folder
The -p or --pretty flag removes the empty spaces in the files of your /out folder
flow-remove-types does not generate sourcemaps, so there is absolutely no way for debugger to map the generated file in lib to original files in src. You have to add breakpoints to the generated files located in lib folder if you like to debug your tests
no way - configuration is generated for the file you hit the arrow in. If you like to run individual tests from gutter, hit the arrow in generated file, not in the source one
You can use Babel flow preset instead of flow-remove-types:
npm install --save-dev babel-cli babel-preset-env babel-preset-flow
create a .babelrc file in your project root dir:
{
"presets": ["flow"]
}
And that's all you have to do - no precompiling, etc., running from gutter/debugging for source files will work out of the box
I have a node.js+express application. To deploy it to my server the partner is asking me to "build" the app into a folder called "dist" where all the files that need to be deployed to the server will exist. How can I implement such kind of a build.
Any hint or guidance would be appreciated.
You could create a script which does this in your package.json. You simply need to create the directory and copy everything required for running your application in production to it and no more.
//package.json
{
//...
"scripts": {
"dist": "mkdir -p dist && cp -R node_modules src server.js ... dist"
}
//...
}
Not the above is not cross-platform compatible. This is always the complex part of such build scripts. If this is an issue for you, I'd recommend looking at using available tooling such as gulp.
You can also use a NPM lifecycle hook to do this automatically as part of your install. Ensure you also run npm install --production rather than npm install to omit your dev dependencies.