23.04 Angular-gh-pages-script

BEFORE RUNNING ANY SCRIPT I MADE, COMMIT YOUR CHANGES!!

Builder V10 and V11 are broken, update to V12

Find the newest version here.

My Scripts

This is accurate since builder Version 10. (View version on running it.)

place the scripts folder on the same level as the angular project, for example:

C:/henk/scripts + C:/henk/angularProjectFolder/scr/..., where they are both directly in C:/henk/

and not C:/henk/scripts + C:/henk/folder/angularProjectFolder/scr/...

nor C:/henk/folder/scripts + C:/henk/angularProjectFolder/scr/...

nor C:/henk/folder/scripts + C:/henk/otherFolder/angularProjectFolder/scr/...

open the scripts/builderData.json, this is the default data.

If scripts/builderData.json does not exist, run builder.py, this will give you errors, but i will generate the scripts/builderData.json for you.

IMPORTANT!

This json will be created/read from wherever your builder.py is ran from. So if you run it in vscode whilst it is in a folder, it probably will create a new one in the top level.

{
    "BuildNumber": 0,
    "JSONVersion": 3,
    "AngularProjectFolder": "PlayTimeClient",
    "BuildDataPath": "/src/app/Models/buildData.ts",
    "AngularDistName": "play-time",
    "HostToUrl": "https://oldmartijntje.nl",
    "BuilderMakeBranch": true,
    "MainBranch": "main"
}

set the BuildNumber to 0 to restart the counting of buildnumbers. This increases automatically every time you run builder.py.

don’t touch JSONVersion, this is for me to debug builder script issues.

how to configure builderData json

1. AngularProjectFolder

   if this is your configuration:

   C:/henk/scripts & C:/henk/myAngularApp/scr/...

   then you should set AngularProjectFolder to "myAngularApp"

2. BuildDataPath

   this is where your buildData wil get saved into the reposetory. So that you can display builddata in the running angular application

   Set this to wherever you want this to be located inside your angular project. You can change the name too. Purely preference.

   Make sure the parent folder exists beforehand, file itself doesn’t need to exist.

   Adding extra data in here will be overwritten.

3. AngularDistName

   • go into angular.json
   • press CTRL+F
   • search for "outputPath": "dist/
   • copy the thing that comes after, for example:

     If it is

     "outputPath": "dist/play-time",

     Then you copy the play-time

   • replace the value of AngularDistName with the thing you copied.

4. HostToUrl

   this is the url you want to host to. For example I am hosting to https://oldmartijntje.nl

   But you can also use https://yourGithubUsername.github.io/YourGithubRepo if you are using default github pages.

5. BuilderMakeBranch

   the builder.py defaultly makes a new branch when you build. You can disable that here.

6. MainBranch

   after making a new branch for each build, it switches back to this branch. If BuilderMakeBranch is set to false, this still needs to be set accurately.

7. GitRepo

   The path to your git repo, so that the last commit url will work

testbuilder vs builder

builder.py updates the buildId and data. It also makes a new branch (if enabled), testbuilder.py doesn’t. testbuilder.py just builds the page in it’s current state to github pages.

remove local branches script

If you run this, it removes the local branches from your pc, make sure you commit beforehand.

problems i solved with my builder

1. manually having to run npm install, and the 2 build commands
2. angular routing problem. Where going to a route will cause errors unless the page sends you there.
3. manually having to set a build number.
4. teamwork issues:
   • not knowing if it is up to date on the active build.
   • Who builded the new version? It wasn’t ready yet
   • did you build from dev? or from a feature branch?

hosting with a different url

hosting with a different url

there are a few steps:

1. get a domain

2. set the DNS A-record to the following IP: 185.199.108.153

3. set the CNAME, this is important for https, if using http, might be optional:

   This is a screenshot from strato

4. add a CNAME into the root folder of the project. this CNAME file must contain your webAdress, for example: oldmartijntje.nl

Link to original

gitignore

i reccomend to put the following in a .gitignore file:

BuilderData.json
environment.prod.ts