What is best place to put externally hosted javascript for a specific page? #2001
-
|
I'm implementing Paddle's custom inline checkout, and as per the documentation (Import Paddje.js) the best place to put it is either in the head or body of your site. Is there a Remix specific way of adding externally hosted scripts that should only get loaded on a specific page? I've come up with the following solution that uses the // root.tsx
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useMatches
} from "remix";
import type { MetaFunction } from "remix";
export const meta: MetaFunction = () => {
return { title: "New Remix App" };
};
export default function App() {
const matches = useMatches()
const isCheckingOut = matches.find(m => m.pathname.indexOf("/checkout") !== -1)
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 />
{isCheckingOut && <script src="https://cdn.paddle.com/paddle/paddle.js"></script>}
{process.env.NODE_ENV === "development" && <LiveReload />}
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
|
That's a perfectly acceptable solution. If you want to make it more generic, take a look at It allows you to add the external scripts to the // routes/checkout.tsx
export const handle = {
scripts: () => [{ src: 'https://cdn.paddle.com/paddle/paddle.js' }]
}Then your root layout renders the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @kiliman. The remix-utils package looks quite useful |
Beta Was this translation helpful? Give feedback.
-
|
@kiliman Is there a possibility to add nonce values to the external scripts? //server.js - (Express Server) passing the nonce to the Loader Context
[...]
app.all(
'*',
process.env.NODE_ENV === 'development'
? createDevRequestHandler()
: createProdRequestHandler(),
)
function createProdRequestHandler() {
const cspNonce = crypto.randomBytes(16).toString('hex')
return createRequestHandler({
build,
mode: process.env.NODE_ENV,
getLoadContext: () => ({
nonce: cspNonce,
}),
})
}
function createDevRequestHandler() {
const watcher = chokidar.watch(BUILD_PATH, { ignoreInitial: true })
watcher.on('all', async () => {
// 1. purge require cache && load updated server build
const stat = fs.statSync(BUILD_PATH)
build = import(BUILD_PATH + '?t=' + stat.mtimeMs)
// 2. tell dev server that this app server is now ready
broadcastDevReady(await build)
})
return async (req, res, next) => {
try {
const cspNonce = crypto.randomBytes(16).toString('hex')
return createRequestHandler({
build: await build,
mode: 'development',
getLoadContext: () => ({
nonce: cspNonce,
}),
})(req, res, next)
} catch (error) {
next(error)
}
}
}
// routes/test.tsx - accessing the nonce through the loader
import { type ExternalScriptsFunction } from 'remix-utils'
let scripts: ExternalScriptsFunction<SerializeFrom<typeof loader>> = ({
data,
}) => {
const { nonce } = data
return [
{
src: `http://localhost:3000/scripts/test.js`,
crossOrigin: 'anonymous',
nonce: nonce,
},
]
}
export let handle = { scripts }
export async function loader({ request, context }: LoaderArgs) {
return json({
nonce: context.nonce,
})
}The html code from the server only contains <link nonce="[object Object]" rel="preload" href="http://localhost:3000/scripts/test.js" as="script" crossorigin="anonymous"/><script src="http://localhost:3000/scripts/test.js" crossorigin="anonymous" nonce="[object Object]"></script>``` |
Beta Was this translation helpful? Give feedback.
-
|
Hi kiliman, can |
Beta Was this translation helpful? Give feedback.
-
|
@yannick-softwerft |
Beta Was this translation helpful? Give feedback.
-
|
@MEBonham <script
dangerouslySetInnerHTML={{
__html: `console.log('Your script here')`,
}}
/> |
Beta Was this translation helpful? Give feedback.
That's a perfectly acceptable solution. If you want to make it more generic, take a look at
remix-utils<ExternalScripts/>component.It allows you to add the external scripts to the
handleexport in your route.Then your root layout renders the
<ExternalScripts/>component.https://github.com/sergiodxa/remix-utils#externalscripts