{"id":20814131,"url":"https://github.com/branflake2267/debugging-angular-appengine","last_synced_at":"2025-12-28T06:16:35.546Z","repository":{"id":145733175,"uuid":"264052115","full_name":"branflake2267/debugging-angular-appengine","owner":"branflake2267","description":"Debugging and deploying Angular application to app engine. ","archived":false,"fork":false,"pushed_at":"2022-12-12T19:06:44.000Z","size":199,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-18T15:21:13.020Z","etag":null,"topics":["angular","appengine","debugging-with-brandondonnelson","travis-ci","vscode"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/watch?v=oT9jTNL56S0","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/branflake2267.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-14T23:56:34.000Z","updated_at":"2020-06-21T10:06:57.000Z","dependencies_parsed_at":"2023-05-22T00:00:51.489Z","dependency_job_id":null,"html_url":"https://github.com/branflake2267/debugging-angular-appengine","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/branflake2267%2Fdebugging-angular-appengine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/branflake2267%2Fdebugging-angular-appengine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/branflake2267%2Fdebugging-angular-appengine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/branflake2267%2Fdebugging-angular-appengine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/branflake2267","download_url":"https://codeload.github.com/branflake2267/debugging-angular-appengine/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243159167,"owners_count":20245675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","appengine","debugging-with-brandondonnelson","travis-ci","vscode"],"created_at":"2024-11-17T21:10:15.383Z","updated_at":"2025-12-28T06:16:35.518Z","avatar_url":"https://github.com/branflake2267.png","language":"TypeScript","readme":"# Debugging Angular with App Engine Hosting\nDebugging Angular with Visual Studio Code hosted on App Engine.\n\n[![Build Status](https://travis-ci.org/branflake2267/debugging-angular-appengine.svg?branch=master)](https://travis-ci.org/branflake2267/debugging-angular-appengine)\n\n\n## Debugging Angular as the Client \u0026 Express as the server\nThis covers debugging Angular as the client with Express as the web server, which will be hosted on App Engine. \n\n[![Debugging Video Tutorial](https://img.youtube.com/vi/oT9jTNL56S0/0.jpg)](https://www.youtube.com/watch?v=oT9jTNL56S0)\n\n## Project Configuration\n| Setting | Value |\n| --- | --- |\n| Purpose | Debugging with VS Code using a simple Angular project |\n| Client | Angular application |\n| Server | Express web server |\n| Client Framework | Angular |\n| Client Language | TypeScript |\n| Server Language | JavaScript |\n| Architecture | npm/node |\n| IDE | Visual Studio Code |\n| License | GPL v3 |\n| Tutorial | [Youtube Tutorial](https://www.youtube.com/watch?v=oT9jTNL56S0)|\n\n\n## Generate Application\nThe app generation is based on https://angular.io/guide/setup-local.\n\n* Run `npm install -g @angular/cli` - Install the app generator CLI tool.\n* Run `ng new client` - Generate an application, I named it `client`.\n* Run `cd client` - Change directory to the app.\n* Run `ng serve --open` - Start the compiler, web server and open Chrome. \n\n\n## Debugging\n\n* From the project root, run `npm install` to download the libraries used in the client and server directories.\n\n### Debugging Server\n* Use the VS Code Launcher `1. Launch Server`\n* http://localhost:8080 - ./ server\n* http://localhost:8080/api - ./api server\n\n### Debugging Client\nThe client uses a proxy to the server. [Proxy config reference](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md).\n\n* Use the VS Code Launcher `2. Launch ng serve \u0026 Chrome`\n* http://localhost:4200 - ./ - client\n* http://localhost:4200/api - ./api - server\n\n### Debugging with npm\n\n* From the ./server directory run `npm start` to start the express web server. \n* From the ./client directory  run `npm start` to start the client compiler and angular debugging. \n\n\n## Deploy\n\nThe application is deployed to https://donnelson-sandbox.appspot.com.\n\n### Travis CI Deployent\n\n* [.travis.yml](https://travis-ci.org/github/branflake2267/debugging-angular-appengine) deploys the application to GAE on master commits.\n\n## Manual Deployment\n\n* Run `cd ./dist`\n* Run `gcloud app deploy`\n\n\n## Init Reference\nThese are the instructions I used to generate angular and configure App Engine on GCP. \n\n### Generate Angular Application\nThe app generation is based on https://angular.io/guide/setup-local.\n\n* Run `npm install -g @angular/cli` - Install the app generator CLI tool.\n* Run `ng new client` - Generate an application, I named it `client`.\n* Run `cd client` - Change directory to the app.\n* Run `ng serve --open` - Start the compiler, web server and open Chrome. \n\n\n### Cloud Tools CLI Installation\n\n1. Sign up for [Google Cloud Compute](https://console.cloud.google.com/).\n2. Create a GCP project.\n3. Create an App Engine Application https://console.cloud.google.com/appengine/start.\n    - This app is Node.js \u0026 a Standard App Engine deployment.\n    - Download Cloud SDK CLI tools\n    - Run gcloud init\n4. Create a service account for App Engine Admin for deployments. \n    - And be sure you add the `Cloud Build API` permissions to the services account. \n    - And turn on the [Cloud API Dash](https://console.developers.google.com/apis/api/cloudbuild.googleapis.com/overview) for the project.\n5. Create an App Engine project in the console https://console.cloud.google.com/appengine.\n    - After you create an app engine project, follow the App Engine getting strted instructions on how to install Cloud CLI.\n\n### app.yaml\n[app.yaml](./server/app.yaml) configures the App Engine web hosting service options. [app.yaml reference](https://cloud.google.com/appengine/docs/standard/nodejs/config/appref)\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbranflake2267%2Fdebugging-angular-appengine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbranflake2267%2Fdebugging-angular-appengine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbranflake2267%2Fdebugging-angular-appengine/lists"}