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!