How to bundle & deploy Javascript apps to the remote server using npm

I am using webpack to bundle all my JS, HTML & CSS files. While webpack is capable bundler, It does not provide any tool (I could be wrong here) to actually create an archive of output folder (in my case, it was dist) as well as deploy it to remote server (I am using artifactory server to store my bundles).

So here is how I did it:

  1. created a new shell script deploy.sh on the root of the project
touch deploy.sh

2. Get version of your app from package.json using node -p

#!/bin/bash

#Get app version

APP_VERSION=$(node -pe "require('./package.json').version")

3. Create archive of dist folder using tar command

#create a name for your bundle
ARCHIVE_NAME='app-name-'$APP_VERSION'.tar.gz'
#create an archive 
tar -czvf $ARCHIVE_NAME -C ./dist .

here, -C makes sure you archive the content of dist directory but not the dist directory itself.

4. deploy this (copy the archive) to the remote server using curl

#deploy to remote server
curl -u username:password -X PUT "http://jenkins.myserver.com:8081/artifactory/libs-release-local/com/myserver/myproject/$APP_VERSION/$ARCHIVE_NAME" -T ./$ARCHIVE_NAME

The full shell script looks like this:

Now call this script from your npm scripts in package.json file:

...
scripts: {
"deploy": "./deploy.sh"
}

That’s it! now run

npm run deploy 

and see your app deployed to the remote server!

Like what you read? Give Nitin Jadhav a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.