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:
- created a new shell script deploy.sh on the root of the project
2. Get version of your app from package.json using node -p
#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
#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:
That’s it! now run
npm run deploy
and see your app deployed to the remote server!