Azure function: app setting"WEBSITE_RUN_FROM_PACKAGE" to the rescue!

velan — Thu, 08 Apr 2021 14:44:42 +0000

Recently came across a scenario, Azure function .netcore package files went missing after redeploying the underlying infra using arm template.

Root cause analysis discovered that when redeploying the underlying infra using arm template, it will clear out wwwroot folder in azure function.

To prevent the wwwroot folder from being emptied out, just need to add an app setting!

WEBSITE_RUN_FROM_PACKAGE: 1

Next.js: Multilanguage support with internationalized routing

velan — Thu, 08 Apr 2021 13:57:03 +0000

Let's create a simple Next.js starter project with multiple languages - English (en-US), Tamil (ta-IN), Hindi (hi-IN), Kannada (kn-IN) support using Next.js native i18n.

👉 Source code of this article available at GitHub

What are we going to do

Creating a Next js app (v10.x.x) with boostrap.css
Configuring i18n in next.config.js
Create locale JSON
Read locale from the route and display in the HTML

Set up

Create a Next js app and add bootstrap, swr as dependency
npx create-next-app
npm i -s bootstrap
npm i -s swr

Run the app
npm run dev

Create a new page called home under pages

const Home = () => {
    return (
        <h1>Hey! I am home - English</h1>
    )
}

export default Home;

Navigate to http://localhost:3000/home

Configuring i18n route

There are two ways to handle locale: Sub-path and domain routing. Here we explore Sub-path routing

Sub-path routing is basically prefixing locale code in front of existing routes without any impact on actual routing.

eg: /home, /en-US/home, /ta-IN/home, /hi-IN/home

Now if you try to access one of the routes eg: /en-us/home, you will see 404 message. Because locale-based routing not enabled yet.

To enable locale-based routing, Create a next.config.js file in the project root as below.

module.exports = {
    i18n: {
        locales: ['en-us', 'ta-in', 'hi-in', 'kn-in'],
        defaultLocale: 'en-us'
    }
}

💡 checkout i18n locale code reference for different languages here

💡 Do remember to stop and start the app, whenever modifying next.config.js

Now try again to access locale-based route /en-us/home
Boom, it works!! 😍

Let's try with another locale code /ta-in/home.

The page didn't break, but the language doesn't change 😦 Because we didn't create any language-specific content.

Create language-specific files

Create a new folder called locales under the public folder and create JSON files with exact names as locale codes

Inside of each JSON create one key-value language as a data property

eg: en-US

{
    "language": "English"
}

ta-IN

{
    "language": "தமிழ்"
}

hi-IN

{
    "language": "हिन्दी"
}

Loading the language file based on route locale code

When navigating to a specific locale route, the page should show content from the respective locale JSON file.

We will be achieving that by
1 Get the locale code from the route
2 Fetch the locale JSON
3 Bind in HTML

1: Get the locale code from the route
next/router will provide us the locale code. Update the home.js file with useRouter hook.

const router = useRouter();
const locale = router.locale;

2: Fetch locale JSON file
Make Rest call using useSWR hook with the locale code from the previous step.

const { data, error } = useSWR(`/locales/${locale}.json`, fetcher)

3: Bind in HTML
Replace the English with the data fetched from the previous step. Final home.js will looks as below.

import { useRouter } from 'next/router'
import useSWR from 'swr'

const Home = () => {
    const router = useRouter();
    const locale = router.locale;

    const { data, error } = useSWR(`/locales/${locale}.json`, fetcher)

    return (
        <h1>Hey! I am home - {data?.language}</h1>
    )
}

const fetcher = (...args) => fetch(...args).then(res => res.json());

export default Home;

Time for Testing! 😃 😃

Try access different route based on route code
http://localhost:3000/ta-IN/home

http://localhost:3000/hi-IN/home

Its working !! Have a great day 😊 😇

Exploring files inside of docker container in windows

velan — Tue, 08 Sep 2020 14:19:29 +0000

Recently i got interested to explore whats inside of an docker image. How the files would have been organized?. Lets find out.

Prerequesite

Running docker image
Powershell

I have took two images for exploration,

docker ps

firstcontainer .Net Core mvc (.net core 2+)
ctiqaui .Net Framework mvc (Mvc 5)

docker exec -t -i firstContainer powershell

The above command will open the powershell terminal inside of docker directory.

Great!. We are inside of docker!!

Now we can use regular windows commands to explore the directories.

ls

so the app folder consist of all the complied codes of .net core app.

lets explore root directory.

cd ..
ls

We can see docker windows image files and app folder to host .net core app.

Lets open up .net framework MVC5 app container and compare with .net core.

It contains windows server core file and IIS to host mvc 5 app.

To come out of the powershell session just press

ctrl + z

DEV Community: velan