I'm a beginner in the field of frontend development and I'm starting to work on building small projects and assignments.
I was wondering how I could add a default script line to every package.json file I create using the npm init command. (I'm on MacOS)
I found out how to set the default author name (which created the .npmrc file in my home directory), however I can't seem to figure out to add the following as a default to all package files:
"scripts": { "start": "live-server --browser=firefox" },
It seems trivial, but as we'll be building out our set-up, there will be certain scripts defaults we'll need in every projects, such as "deploy" settings etc.
Is there an easy way to add this as a default so that this is pre-added with every npm init command?
Or: a classmate of mine created an automator workflow to set-up a new project folder including some starting files and a command that already runs the npm init on that folder. Is there a terminal command to add the above line to the scripts section of the package.json file which we could add to the automator workflow?
You can add custom scripts using the following command in the CLI:
npm set-script dev "nodemon server.js"
Result in package.json:
"scripts": {
"dev": "nodemon server.js"
}
Consult the documentation here.
You can also write it in a shell script file to automate your projects.
Related
I am having a Monorepo and using NX build system.
I am trying to figure out a way to inject the project name in my package.json
package.json
"scripts": {
...
"sampleCmd": "env-cmd -f apps/${projectName}/.env.local"
},
I am looking for a way to inject the projectName/appName.
Example:
If I execute yarn sampleCmd user-service
The sampleCmd should be "env-cmd -f apps/user-service/.env.local"
Yarn run command just add arguments to end of script command defined in package.json. It's not possible to get a specific argument, neither to change the order.
But as a workaround, we can create a dedicated script in a scripts folder for example, and reference it from package.json.
Then inside this script, we can get arguments.
for example, in /scripts/sample-cmd.sh
#!/usr/bin/env bash
cd $(dirname ${0})/..
PROJECT_NAME="${1}"
env-cmd -f apps/$PROJECT_NAME/.env.local
Then in package.json :
"scripts": {
...
"sampleCmd": "./scripts/sample-cmd.sh"
},
Of course, this need to be adapted to target environment, system... (bash, linux/mac/windows...). But the main idea is here.
Note this in not related to NX monorepo, and will work for every NPM/YARN project.
I created my app using create-react-app, and I use npm run build to build the production package.
I need to put the app on different clients' sites, each client put the app on a different sub-folder.
e.g.
client A: https://clientA.com/myApp
client B: https://clientB.com/UAT/myApp
client C: https://clientC.com/webApps/myApp
everytime when I build the package, for different sub-folders, I need to modify the homepage value in package.json, build the package and repeat this steps mulltiple times.
My manual steps like:
modify "homepage": "myApp" > npm run build > save the build folder for deployment
modify "homepage": "/UAT/myApp" > npm run build > save the build folder for deployment
modify "homepage": "/webApps/myApp" > npm run build > save the build folder for deployment
keep repeatly doing the above.....
how can I improve this situation? how can I do build once to fit all different paths?
such as, can I use a variable in homepage value and set it up in environment variable?
or, can I write a script to do some? I hope to simpify this compile steps, ideally to execute the build or a building script once.
Thanks for any help or suggestion.
You can use PUBLIC_URL environment variable when making build. The build command looks like:
PUBLIC_URL=https://clientA.com/myApp npm run build
You can create npm scripts to simplify it like:
{
...
"scripts": {
"build-clientA": "PUBLIC_URL=https://clientA.com/myApp react-scripts build",
"build-clientB": "PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build",
}
...
}
If you want to do one command to build for all of clients, simple bash script to build and move build folder should work fine, it looks like:
PUBLIC_URL=https://clientA.com/myApp react-scripts build && mv build clientA
PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build && mv build clientB
You can just set homepage to . if you're using CRA 9.0 or newer:
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json:
"homepage": ".",
This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
– the documentation
You can simply build it once, and then use vim or any text editor to do the following operation on index.html: Replace ="/ with ="/myApp/ and ="/UAT/myApp/ and =/webApps/myApp/ in the three folders respectively.
You can also use the sed utility to do that. Or maybe even automate it using a bash script.
It does work perfectly with Hash router
you can set homepage like this :
"homepage": "/"
and build project once and handle this server side and read all routes from index.html
I want to put custom script commands while creating package.json using npm init.
npm init only offers to set test command but i want to set build, publish, release etc custom commands.
Basically i want to create below file using npm init without any manual intervention
{
"name": "some name",
"version": "1.0.0",
"scripts": {
"release": "node release.js",
"build": "node index.js"
}
}
Note : Guys i am aware than i can create package.json and then inside that i can edit manually script section to put my commands.
Referring to official doc, you can't do it directly.
But maybe, with using custom questions, it can works.
Have a look here https://docs.npmjs.com/creating-a-package-json-file
This is the first time I have used a frontend Build Tool. In the past I have never used any type of a framework that was more complicated to install than just adding a <script> tag to the top of my html page. Now you know my level of knowledge.
I have a vue.js/vuetify application with directory structure like this:
I think it started with the vuetify/webpack advanced template.
And I am trying to export the project into something that I can put online. I have in my head that somehow I can run some type of a command that will generate all my code into .html, .css, and .js files that I could then hook up to any sort of backend that I wanted.
If my assumption is correct, and that's how things are done, then how is routing handled? Is the entire site just in one html file?
I think webpack is supposed to do this maybe? However when I try to run webpack from the command line, I get command not found.
If my assumption is wrong, then how do I get this online?
Use the npm run build command. You can see what the command does inside the package.json file, scripts object.
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}
Your entire site will be compiled into the index.html file and the build.js file located in the /dist folder. Both the /dist folder and the build.js are generated when you run the npm run build command. Make sure the script src inside of index.html is pointing to your build.js file.
I want to try using npm to run my various build tasks for a web application. I know I can do this by adding a scripts field to my package.json like so:
"scripts": {
"build": "some build command"
},
This gets unwieldy when you have more complex commands with a bunch of options. Is it possible to move these commands to a bash script or something along those lines? Something like:
"scripts": {
"build": "build.sh"
},
where npm run build would execute the commands in the build.sh file?
Reading through this post it seems like it is, but I'm not clear on exactly where I'm supposed to drop my build.sh file or if I'm missing something.
Its totally possible...
"scripts": {
"build": "./build.sh"
},
also, make sure you put a hash bang at the top of your bash file #!/usr/bin/env bash
also make sure you have permissions to execute the file
chmod +x ./build.sh
Finally, the command to run build in npm would be
npm run build
If you don't want to bother with giving permissions and the env you execute the script has for example sh, you could just do
"scripts": {
"build": "sh ./build.sh"
}
Even Simpler:
I routinely do this for one-offs and PoC's not involving a VCS
package.json
{
"scripts": {
"ship": "rsync -avz deployable/* <some-server>:/var/www/some-site/sub-dir/"
},
}
...
Just add 'bash' keyword before the file_name.sh
"scripts": { "build": "bash ./file_name.sh" }
then run "npm run build" on terminal
In case someone sees this and is using Docker for creating an image of this application.
Regarding:
but I'm not clear on exactly where I'm supposed to drop my build.sh file
Wherever you do decide to drop your build.sh file, make sure it is included in the Dockerfile image output, i.e. the file's path is in one of the COPY commands in the Dockerfile.
For example, if you have something like
scripts {
"build": "./scripts/build.sh"
}
Then your Dockerfile should have a COPY command similar to:
COPY scripts/build.sh scripts/