Angular base href for web, desktop, mobile ( and paths for services)
My current stack is .NET Core (backend) + Angular ( frontend) ( For database, it is usual SqlServer – but I use Sqlite, Mongo, local storage ….)
With Angular I can have Mobile application ( by Cordova ) and Windows Desktop ( with Electron)
But the BaseHref it is a PIA …. even for Web, if you host into a virtual directory .
So this is my setup in 2 steps. Maybe could be somehow easy, but… I did not discover something better yet.
Step 1: Create a favicon.svg into the assets folder
Step 2: Instead of
<base href=”/”>
put
<!– <base href=”/”> –>
<script>
var isCordovaApp = !!window.cordova;
var isWindowApp = !!window.MSApp;
if (isCordovaApp) {
hrefApp = “.”;
}
if (isWindowApp) {
hrefApp = “./”;
}
if (!(isCordovaApp || isWindowApp)) {
var baseHref = window.location.href.split(“/”);
while (true) {
baseHref.pop();
hrefApp = baseHref.join(“/”) + “/”;
// window.alert(hrefApp);
var request = new XMLHttpRequest();
request.open(“GET”, hrefApp + “favicon.svg”, false); request.send(null);
if (request.status === 200) {
if(request.responseText.indexOf(“meta name=”)<1){
console.log(`found ${hrefApp} `);
break;
}
}
}
}
document.write(‘<base href=”‘ + hrefApp+ ‘” />’);
</script>
And this is all!
For correct path of services , I do this
For each service , I construct with
constructor(@(Inject)(APP_BASE_HREF) baseHref: string, private client: HttpClient)
this.baseUrl = environment.webAPIUrl + baseHref ;
and when I call a function
const url = this.baseUrl+’api/WeatherForecast;
In the envoronment.ts I have
export const environment = {
production: false,
webAPIUrl: ‘http://localhost:5000’
};
and in the environment.prod.ts I do have
export const environment = {
production: true,
webAPIUrl: ”
};
One more thing: to inject APP_BASE_HREF , I must have into app.modue.ts
providers: [{
provide: APP_BASE_HREF,
useFactory: (s: PlatformLocation) => s.getBaseHrefFromDOM(),
deps: [PlatformLocation]
}
That’s all! ( yes , I know it is a bit complicated….)
Friday Links 388
[ADCES] Testing .NET Core WebAPI
The presentation was about how to test ASP.NET Core WebAPI with
- Postman https://www.postman.com/downloads/
- Swagger https://docs.microsoft.com/en-us/aspnet/core/tutorials/getting-started-with-swashbuckle?view=aspnetcore-3.1&tabs=visual-studio
- WebAPI2CLI https://github.com/ignatandrei/WebAPI2CLI
- NetCore2Blockly https://github.com/ignatandrei/netcoreblockly
The presentation at https://ignatandrei.github.io/Presentations/TestingWebAPIprez.html
Code at https://ignatandrei.github.io/Presentations/TestingWebAPI.zip
Software Application As Commodity–Excel–part 2
Now , about how the workflow is organized .
Step 1: Read Excel
With https://www.nuget.org/packages/stankins.excel .
- From this it should find the name of the sheet = name of the tables.
- Also, it should find the first row with names ( = column names).
So it generates models for each sheet
Step 2: Generating .NET Core , Angular and Cordova source code
- There are templates, in Razor style. It pass the models for the sheet and generates the source code.
- Also , will generate docker files to compile the application on docker
Step 3: Generating executables
- Push the source codes from Step 2 to GitHub
- The Github actions takes the docker files, generates the applications ( WebSite, Android ) into the docker , copies and puts into releases of Github
- Also, it puts the Angular files into the wwwroot of the .NET Coreo
- The application waits for the releases to be generated
Step 4: Creating application
- The application downloads the releases on the local
- Creates a Virtual Directory with the release
- Show the link to the Virtual Directory and to the APK application
And that is all. You can try the demo at http://demo.adces.ro:8080/
Friday Links 387
Software Application As Commodity–Excel–part 1
From the beginning of my programming I was pissed by the repetitive tasks. Most of the software for the business implies a database ( for me, it was mostly SqlServer – but can be also IBM DB2 , Oracle, others) and making a GUI for CRUD operations. Agree , the initial CRUD GUI was improving over time with business requirements – from a simple GUI to something more complex. But , in the first phase, it was a simple GUI that performs CRUD operations.
I have started to automatically generated the CRUD SQL for tables – then generating VB6 frm text files for this. Then I was having just the source code for a CRUD application that I need to copy into my application. And that saves me a lot of time! side note : After making this I saw that multiple people have the same idea in that time – but better suited as product ( as an example, CodeSmith)
Fast forward to our days : everywhere there is the DevOps / CI / CD . That means that you can automatically compile ( usually, with an YAML file ) the source code and make the application.
So let’s put those ideas together : we can generate the source code and then compile and deploy the application, Or , in other terms : is : if you have a well formed data source then you will receive an well formed CRUD application . If I want to put a name, it is Software Application As Commodity ( SAAC )
Until here , there was the theory . Now let’s see some practice. Please prepare an EXCEL that has sheeets tables –like and go to http://demo.adces.ro:8080/ . You can generate
- .NET Core WebAPI application with DataAccessLayer, BusinessLayer
- Angular Application that communicates with the backend
- Cordova application
- Source code for 1,2,3
- A ready to try CRUD site ( composed by compiling the Angular and put into wwwroot of the .NET Core) with a SqlServer database that has the data from Excel ( just the first 200 rows, to not spam)
- An APK Android application – the html of Angular build put into Cordova and compiled into APK. It communicates with the Website deployed at 5
Of course this is just a proof of concept. All it is based on templates ( compiled with Razor ) that can be modified to obtain any kind of application. And can be extended too . But , how this is made, in future posts – see you next time.
Friday Links 386
Friday Links 385
Friday Links 384
- Big Data: 33 Brilliant And Free Data Sources For 2016
- caesar0301/awesome-public-datasets: An awesome list of high-quality open datasets in public domains (on-going). By everyone, for everyone!
- Big data sets available for free – Data Science Central
- 19 Free Public Data Sets For Your First Data Science Project – Springboard Blog
- Walmart Recruiting – Store Sales Forecasting | Kaggle
- Sample CSV Data – SpatialKey Support
- Your brain does not process information and it is not a computer | Aeon Essays
- Assembly Diff Tool for .NET – JustAssembly
- Dealing With Optimistic Concurrency Control Collisions
- Dreyfus model of skill acquisition – Wikipedia
- Shuhari – Wikipedia
- Accelerate .NET Applications with Alea GPU
- Base32, base32url, base64url, and z-base-32 Encoding and Decoding in .NET – CodeProject
- State Management in Vue: Getting Started with Vuex Scotch