Docs and labs for deploying a web app with static front-end, C# backend and PostgreSQL
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const renderPost = (post, user) => { | |
const bodyDiv = Wrapper.generate("div", "", false) | |
.createChild("p", post.body) | |
.appendChild(Wrapper.generate("p", user.username).addClass("tooltip") | |
.appendChild(Wrapper.generate("span", `${user.name} `) | |
.appendChild(AnchorWrapper.generate(`mailto:${user.email}`, user.email)) | |
.createChild("br", "") | |
.appendChild(AnchorWrapper.generate( | |
`https://maps.google.com?q=${user.address.geo.lat}, ${user.address.geo.lng}`, | |
"🌎 Locate")) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class AnchorWrapper extends Wrapper { | |
constructor(href, text, target = "_blank") { | |
super("a", text); | |
this.element.href = href; | |
this.element.target = target; | |
} | |
static generate(href, text, target = "_blank") { | |
return new AnchorWrapper(href, text, target); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Wrapper { | |
constructor(element, text, display = true) { | |
this.element = document.createElement(element); | |
this.element.innerHTML = text; | |
this.display = !display; | |
this.toggleDisplay(); | |
} | |
click(val) { | |
this.element.addEventListener("click", () => val()); | |
return this; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const app = document.getElementById("app"); | |
const run = (model) => get(model, "users", () => | |
get(model, "posts", | |
() => { | |
model.users.forEach(user => model.userIdx[user.id] = user); | |
app.innerText = ''; | |
model.posts.forEach(post => | |
app.appendChild(renderPost(post, model.userIdx[post.userId]))); | |
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const get = (model, domain, done) => { | |
fetch(`https://jsonplaceholder.typicode.com/${domain}`) | |
.then(response => response.json()) | |
.then(json => { | |
model[domain] = json; | |
done(); | |
}); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const app = document.getElementById("app"); | |
window.run = () => app.innerText="Fun!"; | |
app.innerHTML = '<button onclick="run()">Load</button>'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: sans-serif, arial, helvetica; | |
} | |
button { | |
cursor: pointer; | |
margin-top: 1em; | |
padding: 1em; | |
border-radius: 50%; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>My Vanilla.js App</title> | |
</head> | |
<body> | |
<div id="app"> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var userCount = await client.ReadEntityStateAsync<int>( | |
UserCounter.Id); | |
return new OkObjectResult(new | |
{ | |
... | |
activeUsers = userCount.EntityState, | |
... | |
}); |