Remix JS: Does Remix use process.env or import.meta.env?

Does Remix use vite’s import.meta.env or process.env?

The answer is, both. However it’s better to rely on vite’s import.meta.env because of 2 things:
1. Only VITE_ prefixed environment variables are imported
2. It’s also available in the non-SSR context, while process.env is a NODE thing only and not propagated to the browser.

So what does that mean?

You can have a
.env.development
and a
.env.production
file in the project root and add things like

VITE_HTTP_ENDPOINT=http://localhost:8080/api/v1
VITE_OIDC_AUTHORITY=https://my.id.domain.tld

1 2	VITE_HTTP_ENDPOINT=http://localhost:8080/api/v1 VITE_OIDC_AUTHORITY=https://my.id.domain.tld

and you can access those variables with e.g.

const httpEndpoint = import.meta.env.VITE_HTTP_ENDPOINT
const oidcAuthority = import.meta.env.VITE_OIDC_AUTHORITY

1 2	const httpEndpoint = import.meta.env.VITE_HTTP_ENDPOINT const oidcAuthority = import.meta.env.VITE_OIDC_AUTHORITY

but this also gives you access to other variables, which are present by default

{
  BASE_URL: '/',
  DEV: true,
  MODE: 'development',
  PROD: false,
  SSR: true,
}

{

BASE_URL: '/',

DEV: true,

MODE: 'development',

PROD: false,

SSR: true,

}

#vite #remix #env

24. October 202424. October 2024

Uncaught RangeError: date value is not finite in DateTimeFormat.format()

Playing with Flowbite React and their Datepicker component, I had data coming from the backend in this or similar form:

{
	"data": {
		"posts": {
			"edges": [
				{
					"node": {
						"id": "c57e4ea8-072e-4057-974f-bfb369504a57",
						"createdAt": "2024-10-24T12:21:20Z",
						"updatedAt": "2024-10-24T14:03:16Z",
						"title": "Jobangebot mit jemand ohne Namen",
						"body": "Dies ist ein Jobangebot von jemandem ohne Namen",
						"expires": true,
						"expireTime": "2024-10-31T23:00:00Z",
						"category": {
							"id": "df84950d-742b-4d07-9f11-04b8964bcb36",
							"title": "Jobangebote"
						},
						"profile": {
							"id": "0ce6ee59-4ebf-42cf-9c3a-69cf5e826b0b",
							"sub": "288686157058342913",
							"name": ""
						}
					}
				}
			]
		}
	}
}

{

"data": {

"posts": {

"edges": [

{

"node": {

"id": "c57e4ea8-072e-4057-974f-bfb369504a57",

"createdAt": "2024-10-24T12:21:20Z",

"updatedAt": "2024-10-24T14:03:16Z",

"title": "Jobangebot mit jemand ohne Namen",

"body": "Dies ist ein Jobangebot von jemandem ohne Namen",

"expires": true,

"expireTime": "2024-10-31T23:00:00Z",

"category": {

"id": "df84950d-742b-4d07-9f11-04b8964bcb36",

"title": "Jobangebote"

"profile": {

"id": "0ce6ee59-4ebf-42cf-9c3a-69cf5e826b0b",

"sub": "288686157058342913",

"name": ""

}

]

}

aka

"expireTime": "2024-10-31T23:00:00Z",

1	"expireTime": "2024-10-31T23:00:00Z",

React is a bit of a cringy special child. Angular, no problemo. Vue, no problemo.
Anyhow.

I have to set defaultValues in a React-hook-form form, because React is special with controlled and uncontrolled components.
aka

type AdminPostEditFormValues = {
    title: string,
    body: string,
    expires: boolean,
    expireTime: Date,
}
    const {control, handleSubmit, watch, formState: {errors}} = useForm<AdminPostEditFormValues>({
        defaultValues: {
            title: data?.posts?.edges[0]?.node?.title,
            body: data?.posts?.edges[0]?.node?.body,
            expires: data?.posts?.edges[0]?.node?.expires,
            expireTime: dayjs(data?.posts?.edges[0]?.node?.expireTime).toDate() || dayjs().toDate(),
        }
    })

type AdminPostEditFormValues = {

title: string,

body: string,

expires: boolean,

expireTime: Date,

}

const {control, handleSubmit, watch, formState: {errors}} = useForm<AdminPostEditFormValues>({

defaultValues: {

title: data?.posts?.edges[0]?.node?.title,

body: data?.posts?.edges[0]?.node?.body,

expires: data?.posts?.edges[0]?.node?.expires,

expireTime: dayjs(data?.posts?.edges[0]?.node?.expireTime).toDate() || dayjs().toDate(),

}

})

So, I’m using dayjs for my date/time stuff, and this line essentially means, parse the Date before assigning it to a form value (or create a new Date(), because React and controlled/uncontrolled forms is not a happy story).

            expireTime: dayjs(data?.posts?.edges[0]?.node?.expireTime).toDate() || dayjs().toDate(),

1	expireTime: dayjs(data?.posts?.edges[0]?.node?.expireTime).toDate() \|\| dayjs().toDate(),

TL;DR: Parse the date value coming from the backend into a Date object. e.g.

Date.parse("2024-10-31T23:00:00Z")

1	Date.parse("2024-10-31T23:00:00Z")

6. October 20246. October 2024

A list of self-hosted OSS or free PaaS solutions

Kamal

https://kamal-deploy.org/
https://github.com/basecamp/kamal

+:
No central management interface needed, per project configuration

-;
Uses “kamal-proxy”, not nginx. Kamal-proxy is written in Go and significantly slowerthan nginx, as is Traefic and Caddy.

Coolify

https://coolify.io
https://github.com/coollabsio/coolify

+:
Nice looking UI and has continuous integration

-:
Requires 2CPU 2GB RAM and 30GB per node for the UI alone.

Caprover

https://caprover.com
https://github.com/caprover/caprover

Dokku

https://dokku.com/
https://github.com/dokku/dokku

19. April 2024

Beware of ent (entgo.io)

If you’re using Go, you’ve likely heard of ent. Some Ex-Facebook employee maintaining and developing an open source version of the public version of Meta’s entity framework for Go.

Well there’s a catch.
Migrations.

They sweet talk you in their documentation to use Atlas. Ariga’s Atlas, not the MongoDB one.
But Atlas is a proprietary cloud offering.
There might be a free tier, but who cares?
You have to give other parties access to your schema, if you want to containerize your binary or even if you’re not distributing your schema with your binary. Not just your schema, also your database.

To me that is a breach of trust.

That is “open source” software being used as bait for a lock-in cloud offering.

#go #golang #ent #scam #foss

20. March 202420. March 2024

mm_answer_keyallowed: publickey authentication test: ED25519 key is not allowed

Debian 12.
After a long time I’ve installed Debian 12 in a VM again.
I used ssh-copy-id to copy the key files to the VM.
When I tried logging in, I still had to supply my password.
What was going on?

Well, I’ll spare you the mindfuck and give you the solution.

It wasn’t the encoding, it weren’t the permissions, it was…
My .ssh/id_ed25519 and .pub were dated older, from 2021, than a newer key I generated for github, id_ed25519_github.
So, I don’t know why all of a sudden this is happeneing, ssh-copy-id decides to take the most newly generated key in the .ssh directory, which is the github one and ignore all other keys.

In order to fix this

touch ~/.ssh/id_ed25519
touch ~/.ssh/id_ed25519.pub

1 2	touch ~/.ssh/id_ed25519 touch ~/.ssh/id_ed25519.pub

because ssh-copy-id since, who knows when, takes only 1 ed25519 key and it’s always the latest one.

I usually always did the copy/pasting by hand, until I stumbled on some smarty-pants blog-post which suggested ssh-copy-id. I’m going to fall back to doing it manually again.