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!