surya76657 · April 13, 2021 05:31
diff --git a/README.md b/README.md
diff --git a/LiveReload.tsx b/LiveReload.tsx
 export default function () {
  return process.env.NODE_ENV === 'development' ? (
    <script src="http://localhost:35729/livereload.js?snipver=1"></script>
  ) : null
 }
diff --git a/package.json b/package.json
 "scripts": {
  "css:watch": "postcss styles/**/*.css --base styles --dir app/styles --w",
  "css:build": "postcss styles/**/*.css --base styles --dir app/styles --env production",
 },
 "devDependencies": {
  "livereload": "^0.9.3",
  "postcss-cli": "^8.3.1",
  "tailwindcss": "^2.1.1",
 }
diff --git a/pm2.config.js b/pm2.config.js
 module.exports = {
  apps: [
    {
      name: 'Express',
      script: 'server.js',
      watch: ['server.js'],
      watch_options: {
        followSymlinks: false,
      },
      env: {
        NODE_ENV: 'development',
      },
    },
    {
      name: 'Remix',
      script: 'remix run',
      ignore_watch: ['.'],
      env: {
        NODE_ENV: 'development',
      },
    },
    {
      name: 'PostCSS',
      script: 'npm run css:watch',
      ignore_watch: ['.'],
      env: {
        NODE_ENV: 'development',
      },
    },
    {
      name: 'LiveReload',
      // wait for remix to build, also exclude CSS that tailwind rebuilds
      // since we need to reload the entire page anyway
      script: 'livereload --wait 500 --exclusions css',
      ignore_watch: ['.'],
      env: {
        NODE_ENV: 'development',
      },
    },    
  ],
 }
diff --git a/postcss.config.js b/postcss.config.js
 module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
 }
diff --git a/root.tsx b/root.tsx
 import LiveReload from './components/LiveReload'
 import tailwind from './styles/tailwind.css'

 export const links: LinksFunction = () => {
  return [{ rel: 'stylesheet', href: tailwind }]
 }

 ...

 <body>
  <Outlet />
  <Scripts />
  <LiveReload />
 </body>
diff --git a/server.js b/server.js
 const path = require('path')

 ...

 // flush cache on every request vs restarting express
 if (process.env.NODE_ENV !== 'production') {
  let cwd = process.cwd()
  app.all('*', (req, res) => {
    for (let key in require.cache) {
      if (key.startsWith(path.join(cwd, 'build'))) {
        delete require.cache[key]
        if (process.env.DEBUG) console.warn('deleted', key)
      }
    }
    return createRequestHandler({
      build: require('./build'),
    })(req, res)
  })
 } else {
  app.all(
    '*',
    createRequestHandler({
      build: require('./build'),
    }),
  )
 }
diff --git a/tailwind.config.js b/tailwind.config.js
 const defaultTheme = require('tailwindcss/defaultTheme')

 module.exports = {
  mode: 'jit',
  purge: ['./app/**/*.{js,ts,tsx,md,mdx}', './remix.config.js'],
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
 }
	export default function () {
	return process.env.NODE_ENV === 'development' ? (
	<script src="http://localhost:35729/livereload.js?snipver=1"></script>
	) : null
	}
	"scripts": {
	"css:watch": "postcss styles/*/.css --base styles --dir app/styles --w",
	"css:build": "postcss styles/*/.css --base styles --dir app/styles --env production",
	},
	"devDependencies": {
	"livereload": "^0.9.3",
	"postcss-cli": "^8.3.1",
	"tailwindcss": "^2.1.1",
	}
	module.exports = {
	apps: [
	{
	name: 'Express',
	script: 'server.js',
	watch: ['server.js'],
	watch_options: {
	followSymlinks: false,
	},
	env: {
	NODE_ENV: 'development',
	},
	},
	{
	name: 'Remix',
	script: 'remix run',
	ignore_watch: ['.'],
	env: {
	NODE_ENV: 'development',
	},
	},
	{
	name: 'PostCSS',
	script: 'npm run css:watch',
	ignore_watch: ['.'],
	env: {
	NODE_ENV: 'development',
	},
	},
	{
	name: 'LiveReload',
	// wait for remix to build, also exclude CSS that tailwind rebuilds
	// since we need to reload the entire page anyway
	script: 'livereload --wait 500 --exclusions css',
	ignore_watch: ['.'],
	env: {
	NODE_ENV: 'development',
	},
	},
	],
	}
	module.exports = {
	plugins: [
	require('tailwindcss'),
	require('autoprefixer'),
	]
	}
	import LiveReload from './components/LiveReload'
	import tailwind from './styles/tailwind.css'

	export const links: LinksFunction = () => {
	return [{ rel: 'stylesheet', href: tailwind }]
	}

	...

	<body>
	<Outlet />
	<Scripts />
	<LiveReload />
	</body>
	const path = require('path')

	...

	// flush cache on every request vs restarting express
	if (process.env.NODE_ENV !== 'production') {
	let cwd = process.cwd()
	app.all('*', (req, res) => {
	for (let key in require.cache) {
	if (key.startsWith(path.join(cwd, 'build'))) {
	delete require.cache[key]
	if (process.env.DEBUG) console.warn('deleted', key)
	}
	}
	return createRequestHandler({
	build: require('./build'),
	})(req, res)
	})
	} else {
	app.all(
	'*',
	createRequestHandler({
	build: require('./build'),
	}),
	)
	}
	const defaultTheme = require('tailwindcss/defaultTheme')

	module.exports = {
	mode: 'jit',
	purge: ['./app/*/.{js,ts,tsx,md,mdx}', './remix.config.js'],
	darkMode: 'media', // or 'media' or 'class'
	theme: {
	extend: {
	fontFamily: {
	sans: ['Inter var', ...defaultTheme.fontFamily.sans],
	},
	},
	},
	variants: {
	extend: {},
	},
	plugins: [],
	}