It only works with blazor 0.5 + version as GitLab uses linux and there was some issue related to copying files from wwwroot folder on linux machine. (Github issue)
If you are reading this post means you are already familiar with Blazor if not There are pretty awesome article out there that defines blazor in clear way. In short as per the official repository
Blazor is an experimental .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly
To know more about what blazor and all the stuff related to it visit Blazor GitHub repo , awesome-blazor repo and official documentation site.
If you have already up and running blazor application you are good to go along, if not visit official documentation to setup and configure blazor on your machine.
Link of official documentation to get started with Blazor
Get started with Blazor
When you will host your blazor application on your GitLab or GitHub , It will treat that as a multiple page application and most of the file will not found and it will return 404 file not found when browser makes request for files so we need to have to 404.html files in our root level of the production build file inside dist folder and we also need to modify our index.html.
Step 1 : Add 404.html
So basically when running dotnet cli to generate build file it will also copy everything from wwwroot folder to the dist , so we will create 404.html file in wwwroot folder of our project, with the following content so that it will copy that to dist folder when running dotnet cli for publish.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Page Apps for GitHub/GitLab Pages</title>
<script type="text/javascript">
var segmentCount = 0;
var l = window.location;
l.replace(
l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
(l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
l.hash
);
</script>
</head>
<body>
</body>
</html>
Step 2 : Modifying our index.html file
As I mentioned before we also have to modify our index.html file. Add following JavaScript in our index.html file just below the
<app>Loading.. </app>
<script type="text/javascript">
(function (l) {
if (l.search) {
var q = {};
l.search.slice(1).split('&').forEach(function (v) {
var a = v.split('=');
q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
});
if (q.p !== undefined) {
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + (q.p || '') +
(q.q ? ('?' + q.q) : '') +
l.hash
);
}
}
}(window.location))
</script>
Now everything configured , our file structure should be as shown in the image below.
after modifying our index.html file, index.html should be like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>Blazor.CICD</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>Loading...</app>
<script type="text/javascript">
(function (l) {
if (l.search) {
var q = {};
l.search.slice(1).split('&').forEach(function (v) {
var a = v.split('=');
q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&');
});
if (q.p !== undefined) {
window.history.replaceState(null, null,
l.pathname.slice(0, -1) + (q.p || '') +
(q.q ? ('?' + q.q) : '') +
l.hash
);
}
}
}(window.location))
</script>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
Hosting SPA on GitHub is a project on GitHub and we are leveraging this project technique to host our page on GitLab.
Till now we were just configuring our blazor application so that ,if we will run dotnet cli to publish it will also include 404.html and modified index.html in production build file.
Visit here , to know more about hosting and publishing blazor application
Step 3 : Add gitlab-ci.yml at root level of solution
now we need one file that will tell GitLab build runner to perform build , deploy , tests and all. File name should be .gitlab-ci.yml* *and place this file at root level of solution folder and save the file with the following content.
image: microsoft/dotnet:2.1.302-sdk
before_script:
- dotnet restore
pages:
stage: deploy
script:
- mkdir public
- dotnet publish -c Release -o output
- cp -a ./Blazor.CICD/output/Blazor.CICD/dist/* ./public
artifacts:
paths:
- public
only:
- master
in the above .gitlab-ci.yml file.
on line 9 : we are using dotnet cli to publish the build file to output folder
on line 11 : we are copying our files of to the public folder and
(replace *Blazor.CICD *with project name)
on line 14 : we are saying that content of public folder needs to be deployed.
commit the change and GitLab will trigger the build and after building we should be able to see the blazor application live on <yourGitLabUserName>.gitab.io
NOTE
It only works for the repository with name <yourGitLabUserName>.gitlab.io , it should work for other repository as well but unfortunately it doesn’t. It is always looking for the files such as site.css, on <yourGitLabUserName>.gitlab.io in fact it should look at <yourGitLabUserName>.gitlab.io/<repository_name>
Feel free to comment and suggests changes .
Full source code on GitLab
Happy Coding!
