kiliman

💡 HOWTO: Debug your server-side Remix code using VSCode

✨ New in Remix v1.3.5

The latest release of Remix fixes sourcemaps so you no longer need to use any hacks to set breakpoints in your route modules. Simply start the debugger and Remix will hit the breakpoint in your loaders and actions.

Debugging session even survives edits and Live Reload.

edmundhung

import type { ReactElement, MutableRefObject } from 'react';
import { useEffect, useRef } from 'react';
import { useTransition } from 'remix';

export function useProgress(): MutableRefObject<HTMLElement> {
  const el = useRef<HTMLElement>();
  const timeout = useRef<NodeJS.Timeout>();
  const { location } = useTransition();

  useEffect(() => {

sergiodxa

import { renderToStream } from "@react-pdf/renderer";
import ReactDOMServer from "react-dom/server";
import { EntryContext, Headers, RemixServer, Request, Response } from "remix";
import PDF, { loader } from "./pdfs/my-pdf.server";

async function handlePDFRequest(request: Request, headers: Headers) {
  // get the data for the PDF
  let response = await loader({ request, context: {}, params: {} });
  // if it's a response return it, this means we redirected
  if (response instanceof Response) return response;

andrelandgraf

import childProcess from 'child_process';
import fs from 'fs';
import dotenv from 'dotenv';
import prettier from 'prettier';

const rootDir = process.cwd();

dotenv.config({
  path: `${rootDir}/.env.production`,
});

mcansh

Things to note to make this work:

1. you'll need to have your remix registry token available in your shell under REMIX_TOKEN
2. you'll need to add secrets to your GitHub repo for the following items:
   • REMIX_TOKEN
   • VERCEL_TOKEN (https://vercel.com/account/tokens)
   • VERCEL_ORG_ID
   • VERCEL_PROJECT_ID
3. you'll need to have your REMIX_TOKEN available in your vercel repo as an environment variable

ryanflorence

/**
 * The Anatomy of a Remix Route
 */
import { parseFormBody, json, redirect } from "@remix-run/data";
import {
  Form,
  useRouteData,
  usePendingFormSubmit,
  preload,
} from "@remix-run/react";

Zekfad

Quick examples

• feat: new feature
• fix(scope): bug in scope
• feat!: breaking change / feat(scope)!: rework API
• chore(deps): update dependencies

Commit types

• build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci: Changes to CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
• chore: Changes which doesn't change source code or tests e.g. changes to the build process, auxiliary tools, libraries

MichaelSimons

Retrieving Docker Image Sizes

There are two metrics that are important to consider when discussing the size of Docker images.

1. Compressed size - This is often referred to as the wire size. This affects how fast/slow images can be pulled from a registry. This impacts the first run experience on machines where images are not cached.
2. Uncompressed size - This is often referred to as the size on disk. This affects how much local storage is required to support your Docker workloads.

The example commands shown below will work on Windows, MacOS, and Linux.

How to Measure the Compressed Size

fnky

bradtraversy

Node.js Deployment

Steps to deploy a Node.js app to DigitalOcean using PM2, NGINX as a reverse proxy and an SSL from LetsEncrypt

1. Sign up for Digital Ocean

If you use the referal link below, you get $10 free (1 or 2 months) https://m.do.co/c/5424d440c63a

2. Create a droplet and log in via ssh

I will be using the root user, but would suggest creating a new user