DEV Community: jicking bebiro

Dockerize a Nodejs Express Api with VS Code

jicking bebiro — Thu, 28 Mar 2024 22:15:10 +0000

With VS Code (and Docker extension) it is much easier to dockerize a nodejs express app and monitor containers if you dont like to do it all via terminal like myself.

Create a simple nodejs express api

create a new folder then open it on VS Code.

mkdir node-docker
cd nodeapp
code .

Initialize a node project, and set the defaults.

npm init

then install express

npm i express

in project root, create app.js file.

const express = require('express');
const app = express();

const PORT = 3000;

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(PORT,() => {
  console.log(`Server listening on Port ${PORT}`);
});

Add a new script on package .json to start api.
For simplicity copy this package.json

{
  "name": "nodedocker",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "4.19.2"
  }
}

Running npm run start will run api on port 3000.

Once confirmed terminate running app to free port 3000 on local machine as leaving it running prevents you from running your docker instance (this happens to me a lot).

Dockerize express api

Install docker vscode extension

Using Ctrl + shift + p , to open command pallete. then run
> Docker: Add Docker Files to Workspace...

You can leave options to default as it will automatically detects your platform (Nodejs) and creates vs code launch configuration for debugging.

By default It will create a Docker file, 2 docker compose (another one for debug) ,handy docker ignore and vs code launch settings.

For simplicity, you can ryun docker compose via file system pane menu. Select docker compose file and right click to open context menu. Then click compose up to spawn a container instance.

You can then check on docker panel that container is running.

I might write next

mount virtual path
add db to compose
Vscode dev container

Check Website Headers

jicking bebiro — Sun, 12 Feb 2023 02:06:41 +0000

From time to time you'll have to check http headers of your website for security compliance or to make a feature work.

Here's a handy tool to check your site headers.

https://securityheaders.com/?q=https%3A%2F%2Fdev.to%2F

Vite multi-environment setup

jicking bebiro — Mon, 28 Nov 2022 04:56:08 +0000

Demo Github Repo

Here's a quick personal public post on setting/reading env variables on Vite.
By default, Vite uses Development env mode when running on local then switches to Production on Build. For demonstration I will add a staging mode since I use it on most projects I'm working on.

Create env files with vars corresponds to environment (I have staging here)

Read variable

let envMode = import.meta.env.MODE
let envVariableValue = import.meta.env.VITE_GREETINGS

...

<div>
  Mode: {envMode} <br>
  Variable value: {envVariableValue} <br>
</div>

Update script to run on specific environment mode (package.json)

  "scripts": {
    "start": "vite",
    "start:staging": "vite --mode staging",
    "start:production": "vite --mode production",
    "build": "vite build",
    "build:staging": "vite build --mode staging",
    "preview": "vite preview"
  },

Reference: https://vitejs.dev/guide/env-and-mode.html#modes

ASP.NET Core custom scaffold templates

jicking bebiro — Tue, 18 Oct 2022 09:43:24 +0000

My problem

Earlier this week I had to create a couple of .net core razor pages app and used scaffolding to generate CRUD pages. Then i had to update the look and feel of each app to match with my client's branding.
Geez , this will be tedious.
Good thing I can create an ASP.NET CORE Project Template and modify scaffolding templates as described on this post.

TL;DR

Copy desired template folders from

C:\Users\$USER\.nuget\packages\microsoft.visualstudio.web.codegenerators.mvc\$VERSION\Templates

$USER and $VERSION will depend on you local setup.

in the root of your project, create a 'Templates' folder.
When you scaffold an item, visual studio will first check and use if you have 'Templates' folder in your project before using templates from nugget package.

Modify the templates as you see fit.

Webdev Browser Extensions

jicking bebiro — Sun, 10 Apr 2022 19:18:39 +0000

Here's a list of chromium browser extensions I use to be more productive as a web dev.
Posting it here in case you find these useful too.

Web Developer Link

A handy extension for web dev utilities if you are like me who prefers to show block element borders in a click.
CSS Inspector link

Quickly view element's css and copy styles.
Much polished than CSSViewer.
Will require a subscription key in exchange for a donation,
but you can have it for free.
This extension is well made that you'll feel guilty for not donating.
Colorzilla Link
My color picker of choice.
PixelPerfect Link
Easily compare your working web page to your design, for pixel perfection (is that really a thing?)
JSON Viewer Link
Pretty prints json and set theme if you get eyesore viewing default light theme.
Accessibility Insights Link
Do quick A11y tests.
Vue Devtools Link
A must have for a vue js dev.
Marinara Pomodoro Link
A simple pomodori app that does it's best at it, no clumsy popping features.

There are lots of extensions out there in the wild for web devs, feel free to post recommendations in the comment section.

Better DX, Happy Devs

Adding Web Api Controller to a Razor Page ASP.NET Core app

jicking bebiro — Sat, 28 Aug 2021 06:22:25 +0000

This is part of a personal ASP.NET Core cookbook that i am working on.

Open an existing asp.net core 5 razor pages app.

Add Swashbuckle.AspNetCore via nugget. This will auto generate api docs, cool right?

Update Startup.cs to include controller and swagger services and middlewares.

At project root, add Controllers directory then open context menu under that folder by selecting the folder and right click.
On context menu, click add > controller

A new dialog window will open for scaffolding options.
Select API.

Run project then go to https://localhost:PORT/swagger

There you have it, happy hacking.