jerryharrison/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is just for my personal notes.
Excuse any roughness. Might be blog post in future?!
This is based on remix latest as of 1/15/2022
Use pnpm.io for node modules installation and management.
Install remix with Cloudflare pages and typescript
pnpx create-remix@latest
pnpm install -D tailwindcss autoprefixer@^10.0.2 postcss@^8.1.0
pnpm install wrangler@beta
pnpx tailwindcss init
mkdir app/styles && touch app/styles/global.css
echo "@tailwind base;" >> app/styles/global.css
echo "@tailwind components;" >> app/styles/global.css
echo "@tailwind utilities;" >> app/styles/global.css

Replace root.tsx with file below (mainly want to import the global.css file and add to exported links function
Add dev command to package.json
"dev:css": "tailwindcss -i ./app/styles/global.css -o ./app/styles/tailwind.css --watch",
Final steps, remix with cloudflare-pages doesn't like to be ran in dev mode... to help it just build first then run dev. HMR will take over and work thereafter.
pnpm run build
pnpm run dev

Need a database? local dev can use SQLite
pnpm install prisma typescript ts-node @types/node --save-dev
pnpm install @prisma/client --save
pnpx prisma
pnpx prisma init --datasource-provider sqlite

Add some helpers to package.json
"migrate": "pnpx prisma migrate dev --name"

Add files to .gitignore
echo "app/styles/tailwind.css" >> .gitignore
echo "/prisma/dev.db" >> .gitignore
echo ".env" >> .gitignore


## root.tsx
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration
} from "remix";
import tailwindStyles from "./styles/tailwind.css";
import type { MetaFunction, LinksFunction } from "remix";

export const meta: MetaFunction = () => {
  return { title: "" };
};

export let links: LinksFunction = () => {
    return [
        { rel: "stylesheet", href: tailwindStyles }
    ];
};

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        {process.env.NODE_ENV === "development" && <LiveReload />}
      </body>
    </html>
  );
}
	import {
	Links,
	LiveReload,
	Meta,
	Outlet,
	Scripts,
	ScrollRestoration
	} from "remix";
	import tailwindStyles from "./styles/tailwind.css";
	import type { MetaFunction, LinksFunction } from "remix";

	export const meta: MetaFunction = () => {
	return { title: "" };
	};

	export let links: LinksFunction = () => {
	return [
	{ rel: "stylesheet", href: tailwindStyles }
	];
	};

	export default function App() {
	return (
	<html lang="en">
	<head>
	<meta charSet="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<Meta />
	<Links />
	</head>
	<body>
	<Outlet />
	<ScrollRestoration />
	<Scripts />
	{process.env.NODE_ENV === "development" && <LiveReload />}
	</body>
	</html>
	);
	}