I decided to move my react hobby project from react to preact and struggling with the documentation. Most of the information I got was either from the existing examples or issue discussions on the github.
But what still didn't find is the info on ejs variables used in the template html file.
Is there a good explanation what variables there are by default and how to manage them?
There's not much of use that's there by default, as this is instead a method of allowing you to inject your own values. If you want to see what's there by default, you can add the following to your template.html:
<body>
<% preact.bodyEnd %>
<%= JSON.stringify(htmlWebpackPlugin.options) %>
</body>
This is what would get spit out:
{
"template":"!!/home/ryun/Projects/foobar/node_modules/ejs-loader/index.js?esModule=false!/tmp/preact-cli/template.tmp.ejs",
"filename":"index.html",
"hash":false,
"inject":true,
"compile":true,
"favicon":"assets/favicon.ico",
"minify":{
"collapseWhitespace":true,
"removeScriptTypeAttributes":true,
"removeRedundantAttributes":true,
"removeStyleLinkTypeAttributes":true,
"removeComments":true
},
"cache":true,
"showErrors":true,
"chunks":"all",
"excludeChunks":[
],
"chunksSortMode":"auto",
"meta":{
},
"title":"Home Page",
"xhtml":false,
"url":"/",
"inlineCss":true,
"preload":false,
"manifest":{
"name":"foobar",
"short_name":"foobar",
"start_url":"/",
"display":"standalone",
"orientation":"portrait",
"background_color":"#fff",
"theme_color":"#673ab8",
"icons":[
{
"src":"/assets/icons/android-chrome-192x192.png",
"type":"image/png",
"sizes":"192x192"
},
{
"src":"/assets/icons/android-chrome-512x512.png",
"type":"image/png",
"sizes":"512x512"
}
]
},
"excludeAssets":[
{
}
],
"config":{
"_":[
],
"src":"/home/ryun/Projects/foobar/src",
"dest":"/home/ryun/Projects/foobar/build",
"cwd":"/home/ryun/Projects/foobar",
"esm":true,
"sw":true,
"babelConfig":".babelrc",
"preload":false,
"prerender":true,
"prerenderUrls":"prerender-urls.json",
"brotli":false,
"inline-css":true,
"config":"preact.config.js",
"c":"preact.config.js",
"production":true,
"isProd":true,
"isWatch":false,
"manifest":{
"name":"foobar",
"short_name":"foobar",
"start_url":"/",
"display":"standalone",
"orientation":"portrait",
"background_color":"#fff",
"theme_color":"#673ab8",
"icons":[
{
"src":"/assets/icons/android-chrome-192x192.png",
"type":"image/png",
"sizes":"192x192"
},
{
"src":"/assets/icons/android-chrome-512x512.png",
"type":"image/png",
"sizes":"512x512"
}
]
},
"pkg":{
"private":true,
"name":"foobar",
"version":"0.0.0",
"license":"MIT",
"scripts":{
"build":"preact build",
"serve":"sirv build --port 3001 --cors --single",
"dev":"preact watch -p 3001",
"lint":"eslint src",
"test":"jest"
},
"eslintConfig":{
"extends":"preact",
"ignorePatterns":[
"build/"
]
},
"devDependencies":{
"enzyme":"^3.10.0",
"enzyme-adapter-preact-pure":"^2.0.0",
"eslint":"^6.0.1",
"eslint-config-preact":"^1.1.0",
"jest":"^24.9.0",
"jest-preset-preact":"^1.0.0",
"preact-cli":"^3.0.0",
"sirv-cli":"1.0.3"
},
"dependencies":{
"preact":"^10.3.2",
"preact-render-to-string":"^5.1.4",
"preact-router":"^3.2.1"
},
"jest":{
"preset":"jest-preset-preact",
"setupFiles":[
"<rootdir>/tests/__mocks__/browserMocks.js",
"<rootdir>/tests/__mocks__/setupTests.js"
]
}
}
},
"scriptLoading":"defer",
"CLI_DATA":{
"preRenderData":{
"url":"/"
}
}
}
Not really useful, but it's not meant to be. These are just the options used to configure html-webpack-plugin.
However, if using a prerender-urls.{json,js} then this becomes really useful.
prerender-urls.json
[
{
"url": "/",
"title": "Home Page",
"myVal": "foo"
},
{
"url": "/profile",
"title": "Profile Page",
"myVal": "bar"
}
]
Now in our template we can do the following:
<meta name="some-meta-tag" content="<%= htmlWebpackPlugin.options.myVal %>">
That value would get swapped out for what you've specified in your prerender-urls.json file, for each route that gets prerendered.