2

I have an Angular site I'm developing in Visual Studio Code with GitHub for the source control. Not sure if it's relevant to the issue, but the site was started using the Angular CLI to create the file structure, etc.

Then, I created a new Azure App Service and connected to the GitHub Repo using the Deployment Options blade on the Azure Portal.

Unfortunately, the site does not start because the entire repo has been copied up to the App Service, and not just the contents of /src or /dist. Effectively, the App Service has no idea where main.ts is, and, therefore, it's more of file storage than it is a working web site.

I do not see any configuration options in the Azure Portal to tell the site to serve from the /src path, so how can I get this site functional? Is there a configuration I need to make on the project-level in my Angular code? It doesn't seem so since all files are being pushed up - /src or /dist just don't look like they're being considered as the starting point for serving the site.

Update I've found the setting in the Azure Portal when I can point to either the /src or /dist folder, unfortunately, the /dist folder is still not being pushed up to GitHub, and, therefore, not making it to Azure. Of course, the ideal would be to just publish the /dist folder up on Azure to save space as I don't need a complete copy of the repo up there. And, even though I've changed the path to /src, it does not actually run, because /src contains the .ts files whereas the /dist folder contains everything boiled down to .js as expected.

Update #2 After poking around SO, and other resources, I decided to give Fredrik's guide below a shot. Originally, I didn't want to have another cog in the machine (VSTS) but it doesn't really seem to be any other way to get just the deployment /dist files pushed up to Azure in a Continuous Integration manner.

I can't thank Fredrik enough for his help!

Improve this question

1 Answer 1

Reset to default
1

If you would consider Visual Studio Team Services (VSTS), I have a guide I wrote on medium for this:

Setting up a CI pipeline for deploying your Angular application to Azure using Visual Studio Team Services and GitHub

Basically you need to automate running ng build --prod and deploy only the /dist folder. Possibly also add a web.config to route all requests coming to your site to /index.html. All of that is covered in the blog post :)

Even if you're using another build tool/service than VSTS, the guide should give you an idea of what needs to be done.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I would prefer to do this directly from VS Code and GitHub, but I appreciate the link for your work with VSTS.
@rcastagna no problem, too bad it's not what you're looking for. I really don't think you can perform your build steps directly on Azure though unfortunately. You most likely need an intermediate step in between for that to push only your dist
I've been going through your guide and receiving an error saying "npm ERR! missing script: build-prod". Did I miss a block of code that needed to be added somewhere? I added a build-prod block to the package.json file as directed.
@rcastagna did you add this line to your npm scripts inside package.json? "build-prod": "ng build --prod --aot"
Yes, I did. I'm going to try to run a build using just the build script and see if that succeeds.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.