Angular 6 CLI Deploy Pipeline Edited

Hi all,

This is not actually a discussion but more of a bit of information for other people that are (maybe) struggling with the same issue i had (sorry if this is not the correct place for this).

If you want to build and deploy (push the dist folder/files) an angular app with ftp, without having to do another build/deploy on your own webserver, keep on reading.

That issue is about deploying an angular app build to the webserver.
So what i wanted was, when i pushed a new version to my master branch, the pipeline would build the app with the ng cli and afterwards push the dist/ folder output to my webserver.

This is now done with ftp, and not git (that so many others suggested on this community).
I was not looking for git pushes or anything that would also trigger a build on my webserver, all i needed was my already builded app to be pushed to my webserver right into my site root.

So here is my pipeline yml:


image: node:8.11
pipelines:
default:
- step:
name: Build app
script: # The script below will build the application.
- npm install
- npm install -g @angular/cli
- ng build --prod --build-optimizer --progress=false
artifacts:
- dist/**

- step:
name: Deploy app
script: # The script below will deploy the application to the webserver.
- apt-get update
- apt-get install ncftp
- ncftpput -v -u "$FTP_USERNAME" -p "$FTP_PASSWORD" -R $FTP_HOST $FTP_SITE_ROOT $BITBUCKET_CLONE_DIR/dist/**/**

I am not saying this is the best solution, but i have been trying stuff for a week and this was the only successful pipeline i got to work for simply pushing my already builded app files to my webserver.

note:

- i used environment variables, so you have to add your own for the ftp config.
- also note the '--progress=false', i don't know if others have the same issue, but the progress output for the angular build messes up the entire steps output.
- mind your ftp host, ncftp does not support FTPS, and the hostname should not contain ftp:// or http://

I hope people that are looking to just build their ng site/app and push the final files to the webserver/site root have any use of this.

Cheers all.

2 comments

Why should I use FTP , can I use ssh instead of that if yes what command should I use instead of nsftpput command ?

I used FTP because it is simple to use in my opinion, and almost every webhost provides FTP and info.

Not all webhosts/hosting solutions provides an SSH option and ftp is easier to understand and use by new users to deploying.

With ssh you would also require to do more trickier stuff, because you will need to copy and move the files on a system level (at least so far i understand ssh is a command line connection with the machine).

So ssh also requires more setup (user rights perhaps on hosting end etc).
With FTP this is usually already taken care of (depending on host).

But yes it should be possible, it should be the same as working with ssh yourself in terminal (what the yml script does, is run those 'script' lines in its container os terminal).

Open a connection with the commands in the yml and then just make new lines with terminal commands to move/copy the files to your hosting location, like you would when doing it yourself manual on your machine.

something like this i think:

scp [path of file/folder to send] root@[receiver/host's IP]:[target/wwwroot directory]

instead of the install and ncftp line.
But i am also used to ftp, and not ssh for copying files/folders to my hosts so if this is all there is to it and if it is correct, i cannot say.

@Dennis Keulen  I solved my issue with SCP command as you said, you saved my day :).

Thanks.

Glad it helped! :)

How does the FTP handle the deploy for a new version? Will it overwrite existing files and delete old ones? 

Comment

Log in or Sign up to comment
Community showcase
Published Thursday in Bitbucket Pipelines

Building a Bitbucket Pipe as a casual coder

....sh :  #!/bin/bash source "$(dirname "$0")/common.sh" enable_debug extra_args="" if [[ "${DEBUG}" == "true" ]]; then extra_args="--verbose" fi # mandatory variables ROLLBAR_ACCESS_TOKEN...

188 views 0 12
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you