Preact-cli: Trying to add a custom index.html

Created on 8 Jan 2020  ·  17Comments  ·  Source: preactjs/preact-cli


Do you want to request a _feature_ or report a _bug_?
Yes

What is the current behaviour?
When I added the index.html and trying to build with it using preact buld --template {path} I get TypeError: Cannot read property 'compilation' of undefined

If the current behaviour is a bug, please provide the steps to reproduce.

  1. cp node_modules/preact-cli/lib/resources/template.html src/index.html
  2. preact build --template ./src/index.html

What is the expected behaviour?
Project builds successfully

If this is a feature request, what is motivation or use case for changing the behaviour?

Please mention other relevant information.
preact.config.js:

import envVars from 'preact-cli-plugin-env-vars';

export default function (config, env, helpers) {
  envVars(config, env, helpers);
}

Please paste the results of preact info here.
preact-cli 2.2.1

It's a pretty basic app created with preact CLI.

picture beshur

Most helpful comment

template.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Preact CLI Demo</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="demo-keyword" content="<%= htmlWebpackPlugin.options.blah %>">
        <% preact.headEnd %>
    </head>
    <body>
        <% preact.bodyEnd %>
    </body>
</html>

prerender-urls.json

[
  {
    "url": "/",
    "blah": "some value"
  }
]
picture prateekbh on 6 Feb 2020
👍3

All 17 comments

Fixed like this:

  • renamed the template to src/template.html
  • ran npm run build without additional params

It works fine, but I still wonder how I could pass env vars into the template. Any thought?

beshur picture beshur on 11 Jan 2020

are you sure you are on v2 and not v3?

prateekbh picture prateekbh on 11 Jan 2020

v2 didn't had the capability to pick up src/template.html without params

prateekbh picture prateekbh on 11 Jan 2020

Well, it's strange,
globally it's 2.2.1,
and local is 

$ ./node_modules/.bin/preact -v
preact, 3.0.0-rc.7
beshur picture beshur on 12 Jan 2020

yeah picks whatever is the local over the global one

prateekbh picture prateekbh on 12 Jan 2020

Thanks, I see. But do you have any suggestion how I can pass env vars into
it?

вс, 12 янв. 2020 г. в 22:59, Prateek Bhatnagar notifications@github.com:

yeah picks whatever is the local over the global one

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/preactjs/preact-cli/issues/937?email_source=notifications&email_token=AAEB6MP75FPZPCFGHJ6OHEDQ5OAB5A5CNFSM4KEEUUZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIXEBTQ#issuecomment-573456590,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAEB6MOEJWQBMVS2AI3IJ6LQ5OAB5ANCNFSM4KEEUUZQ
.

--
Alex Buznik ([email protected])
http://buznik.net/

beshur picture beshur on 12 Jan 2020

I guess prerendering can help.
https://preactjs.com/cli/pre-rendering

prateekbh picture prateekbh on 13 Jan 2020

Closing this as the original issue is fixed. Feel free to continue the discussion on this tho

prateekbh picture prateekbh on 13 Jan 2020

The thing is, I need to put some variables into the template.html, before any script execution, @prateekbh

beshur picture beshur on 6 Feb 2020

And these variables need to be different on every build?

prateekbh picture prateekbh on 6 Feb 2020

No, but I'd like not to hard-code it in the template.

beshur picture beshur on 6 Feb 2020

(I fixed it in the mean-time with a post-processing from my hosting provider (Netlify), but still would be interesting how I can make it work in the build-time)

beshur picture beshur on 6 Feb 2020

I am extremely interested in learning the deatils of this use case.
Can you give a sample repo/ or more elaborate example?

prateekbh picture prateekbh on 6 Feb 2020

Well, it looks pretty straightforward to me.
I want to add some meta tags to header - like google-site-verification which should be there without javascript.

while I create a custom template.html, I can't understand how I exactly I can pass the meta tag value there.

beshur picture beshur on 6 Feb 2020

template.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Preact CLI Demo</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="demo-keyword" content="<%= htmlWebpackPlugin.options.blah %>">
        <% preact.headEnd %>
    </head>
    <body>
        <% preact.bodyEnd %>
    </body>
</html>

prerender-urls.json

[
  {
    "url": "/",
    "blah": "some value"
  }
]
prateekbh picture prateekbh on 6 Feb 2020
👍3

Thank you so much, @prateekbh, I did not get it would work like this!

beshur picture beshur on 6 Feb 2020

i'll update our docs as well :)

prateekbh picture prateekbh on 6 Feb 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jpoo90 picture jpoo90  ·  4Comments
oren picture oren  ·  3Comments
AlStar01 picture AlStar01  ·  3Comments
haggen picture haggen  ·  3Comments
hguillermo picture hguillermo  ·  3Comments