I'm trying to find information online about how to deploy an angular2 with webpack app to azure, but I couldn't find anything helpful enough. I checked the start package as suggested here How do you deploy Angular 2 apps? but I also couldn't find much help there.
So, I have an angular2 app running with webpack locally. It's working perfectly locally. But how do I deploy it to Azure Web Apps?
I appreciate any help :)
Thanks!
Well, so I was able to get it working.
After researching I found out there are a few options to go by, mainly creating your own local prod build and uploading it and using CD/CI. I went with the latter. It took quite some time, but now it's all set I don't have to worry about it anymore...
I based myself in this tutorial http://tattoocoder.com/angular2-azure-codeship-angularcli/ by Shane Boyer but since link-only answers are discouraged I'm going to write it here.
Here's how I did it:
Create a branch release on GitHub (I use this one to publish)
Create a free account on CodeShip and import the GitHub repo
On Configure Project select I want to create my custom commands and use this code:
nvm install 4.1
npm install angular-cli
npm install
Then this one under Test pipeline:
ng serve &
ng e2e
ng build -prod
Click Save and go to dashboard
Now go to your Azure Portal (https://portal.azure.com/) and open/create your web app
Click on Deployment Options > Choose Source > Local Git Repository
Then click on Deployment Credentials and insert the user/password you prefer
Click on Overview and copy your Git clone url
Go to Project settings > Environment variables and add AZURE_REPO_URL with the value being the git clone url you copied with the user/password (https://username:password#site.scm.az(...).git):
After, click on Deployment on the left navigation menu
Choose the branch you want to deploy from (in my case it was release) and click Save, then click on Custom Script
Then customize and add this script:
git config --global user.email "email#provider.com"
git config --global user.name "Your name"
git clone $AZURE_REPO_URL repofolder
cd repofolder
rm -rf *
cp -rf ~/clone/dist/* .
git add -A
git commit --all --author "$CI_COMMITTER_NAME <$CI_COMMITTER_EMAIL>" --message "$CI_MESSAGE ($CI_BUILD_URL)"
git push origin master
That was it. Now every time you push to GitHub CodeShip will build your code and every time you PR to release it will build AND publish to azure.
Thank https://stackoverflow.com/users/595213/shayne-boyer for this.
Related
I'm new at this: is there any way to let github build a page with the index.html file that is placed in a folder instead of readme?
I've been successfully building a lot of pages with that the index file isn't in a folder. But when it comes to websites that include Angular or node.js, the index file has to be in a folder so when github builds a page, the readme file appears instead of the actual site.
Is there a solution?
https://github.com/JanviaveTharwat/weather-app
That's one of the websites built with node.js. This is what appears to me after building page
https://janviavetharwat.github.io/weather-app/
https://github.com/JanviaveTharwat/angular-store-
Here is the second website with Angular. This is what happened:
https://janviavetharwat.github.io/angular-store-/
Can you help me ?
You can follow this guide for deploying Angular applications to GitHub Pages from the official Angular documentation here and the GitHub Pages documentation for the setup on GitHub itself here.
These are the steps as of Dec 23 2022:
Assuming your project already has an GitHub repository, follow these steps:
Create and checkout a git branch named gh-pages:
git checkout -b gh-pages
Build your project with the following command and flags:
ng build --output-path docs --base-href /<your-project-name>/
When the build is finished, make a copy of the docs/index.html file and name it docs/404.html
Commit your changes and push them - make sure that the docs directory is included
On the project GitHub repository, go to Settings
In the Code and automation section of the sidebar, click on Pages
Under Build and deployment, under Source select Deploy from a branch
Under Build and deployment, under Branch and select your gh-pages branch
Use the drop-down to the right of the branch drop-down to select the docs folder
Click Save. Your application should now be deployed and accessible under https://<user_name>.github.io/<project_name>
I have made changes to some css and js file in my Node-React apllication which is deployed on Heroku. But the changes are not showing up when I git add . the project on heroku. ALthough the changes are not coming up when I run the project locally.
Any help would be appreciated on what could be the possible cause on the changes not getting deployed?
You need a few more commands in your deployment workflow.
The git add . command is putting your local changes into staging.
You also need to run git commit -m 'your commit message' in order to commit those local changes to your local git repository.
Next, you need to run git push to push your local repository to the remote repository it is linked with.
Effective use of git is one of the most useful things you can teach yourself as a developer. It will enable you to contribute effectively to a team when the time comes. Here's a good starter article: Basic Git With Examples.
Is it possible to change a file on Netlify after the site has already been built?
Example:
If I have a site:
https://physiome-test.netlify.com/simple_heart/ that accesses a file at
https://physiome-test.netlify.com/simple_heart/models/organsViewerModels/cardiovascular/heart/ecgAnimation.json
Is there any way that I can change this file without having to update my github repository?
Is there any way that I can change this file without having to update my github repository?
Using Netlify continuous deployment, which is what you are doing, you can't just change one file on Netlify without changing the files in your git repository that is tied to building your build process.
Process Netlify uses:
On commit trigger (webhook from GitHub) or a trigger deploy in the app.netlify.com admin
Checkout your target branch
Runs your build command
Compares your current build to existing CDN contents
Updates global CDN for changed files in your target deploy location
Changing Netlify Files without changing git
A new feature allows you to drag a deploy folder to app.netlify.com for fast review/deploy without using your git repository. Go to the Deploys tab of the site you want to update. You will see a message at the bottom like the pic below:
Drag your deploy folder to this location from your local system and your site will be updated with any new files on Netlify.
Note: All the files of your site must be in the folder with your current changes.
The netlify-cli can deploy directories without modifying a git repo.
Here is an example usage:
npm run build
netlify status
netlify deploy
and if everything looks good on your draft URL, take it live with the --prod flag.
netlify deploy --prod
Everything will update automatically.
Have you tried NetlifyCMS? https://www.netlifycms.org/
You can edit content on Netlify and it is integrated to Git workflow.
I am using WebDeploy to deploy a node website to azure.
I've seen in samples and demos that it should trigger a npm install on deploy.
But it is not. I've also seen almost every demo uses git deployment.
Is automatic npm install not supported for WebDeploy or am I missing something?
when you use WebDeploy, it will just copy over all the file from your machine to cloud, it will not trigger any build process. You will have to responsible to make sure your app is ready to run.
if you want CI function, please setup continues deployment, here is tutorial for setting up local git
https://azure.microsoft.com/en-us/documentation/articles/web-sites-publish-source-control/
and there are other options if you have repository in github/bitbucket/Visual studio Team Service etc ... (go to https://portal.azure.com, select your site --> all settings --> continuous deployment to see all supported optinos)
According to the doc Publish to Microsoft Azure Website using Web Deploy, it said
Deployment will include all the files in your project. Files in the node_modules folder are included automatically, even if they are not part of the project.
So all files under your project folder in VS, including the node_modules folder, will be deployed.
What would be the proper way to deploy a Go app to Azure that have private GitHub repositories as dependencies? Here's the current error from Kudu:
Resolving dependencies
# cd .; git clone https://github.com/my/privaterepo
D:\local\Temp\8d315fa89272e69\gopath\src\github.com\my\privaterepo
Cloning into 'D:\local\Temp\8d315fa89272e69\gopath\src\github.com\my\privaterepo'...
fatal: could not read Username for 'https://github.com': Bad file descriptor
package github.com/my/privaterepo/pkg1: exit status 128
package github.com/my/privaterepo/pkg2: cannot find package $GOROOT)
Building Go app to produce exe file
azureapp\file.go:8:2: cannot find package "github.com/my/privaterepo/pkg1"
in any of:
D:\Program Files\Go\1.5.1\src\github.com\my\privaterepo\pkg1 (from $GOROOT)
I was previously deploying via FTP with web.config's HttpPlatformHandler entry. But using git push is quicker especially for non-Windows team members.
Thanks
As #Not_a_Golfer and #Xiaomin said, vendoring the dependencies worked, here's what I did:
Turned the env variable on locally GO15VENDOREXPERIMENT=1
Installed godep => go get github.com/tools/godep
Making sure your app is passing a go build & go test
Ran godep save this copied all dependencies to ./vendor
On my Azure web app, I also set the environment variable GO15VENDOREXPERIMENT=1
git pushed and voila.
At first I did not set the environment variable on my Azure app, so the dependency resolver was not looking in ./vendor, turning it to 1 fixed everything.