Angular 6 CLI Deploy Pipeline

dkeulen September 5, 2018

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.

7 comments

Comments for this post are closed

Community moderators have prevented the ability to post new comments.

Post a new discussion

ahmedalmulki October 12, 2018

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

dkeulen October 12, 2018

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.

ahmedalmulki October 12, 2018

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

Thanks.

dkeulen October 12, 2018

Glad it helped! :)

woeterman_94 February 22, 2019

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

beks6 July 17, 2019

yes just overwriting the files

woeterman_94 November 26, 2019

And delete old files?

sanin July 29, 2019

Hi. 

Thank you for this tutorial.  I have just started learning about bitbucket pipeline.  I have two questions for you. My repository name is "xyz" 

I have to upload all the files of dist folder into this test folder. 

xxx.xxx.xxx.xxx/public_html/test

1.  This code created a folder named xyz automatically inside the test folder  that contains all the content of dist. How can I just deploy all the content of dist to test folder.

2. This test folder already consists of my htaccess file. So for each deployment I have to delete all the files inside test folder except this htaccess file.

 

Can you please help me. 

 

Thank you.

 

AppsWise Technologies Pvt. Ltd. October 8, 2019

Thank you very much was breaking my head for long, just because that pitty thing artifact tag was missing the whole build pipeline was failing.

woeterman_94 November 26, 2019

I'm using firebase

 

image: node:10

pipelines: branches: main: - step: name: "Build, test and deploy to firebase production" deployment: production caches: - node script: - npm install -g @angular/cli - npm install -g firebase-tools - npm install - ng build --prod - firebase deploy --only hosting --token "$FIREBASE_TOKEN"
Akmal Nawfer May 11, 2020
image: node:10.15.3

pipelines:
branches:
master:
- step:
name: Build
script:
- npm install
- npm install -g @angular/cli
- ng build --prod
artifacts:
- "$BITBUCKET_CLONE_DIR/dist/**"
- step:
name: Deployment
deployment: Staging

script:
- pipe: atlassian/ftp-deploy:0.3.2
variables:
USER: $FTP_USERNAME
PASSWORD: $FTP_PASSWORD
SERVER: 18.224.42.18
REMOTE_PATH: '/'
LOCAL_PATH: '$BITBUCKET_CLONE_DIR/dist/**/**'


I am using ftp-pipe provided by bitbucket, but I am unable to upload the dist folder, instead it uploads the root folder items. can you please point me out what I am doing wrong?


PS: I tried your method too, but no luck

rogiervancann October 21, 2020

I recommend to remove the last /**:

   - ncftpput -v -u "$FTP_USERNAME" -p "$FTP_PASSWORD" -R $FTP_HOST $FTP_SITE_ROOT $BITBUCKET_CLONE_DIR/dist/**/**

Should be:

   - ncftpput -v -u "$FTP_USERNAME" -p "$FTP_PASSWORD" -R $FTP_HOST $FTP_SITE_ROOT $BITBUCKET_CLONE_DIR/dist/**

 otherwise only the /assets folder will be uploaded

Comments for this post are closed

Community moderators have prevented the ability to post new comments.

Post a new discussion

TAGS
AUG Leaders

Atlassian Community Events