Not Being able to edit or configure index.html

[davi-mbatista]

I don't know if this is intentional but, I think that would be nice to have the index.html open to the CLI user, this way we can configure some stuff.

[thangngoc89]

I created a similar issue here #45 .

[Kiricon]

@developit I was considering making a pull request where there would be a new file under the assets folder called header.html or something like it. From there you could add what ever meta tags you need for SEO. The header.html file would be included in the template.html under the rest of the meta tags and be imported through htmlWebpackPlugin.options.

That or make the template.html file accessible to the user under the assets folder.

I love the cli application however SEO integration with facebook and twitter is vital to my PWA.

Let me know what your thoughts are, I would love to make a pull request for this solution.

[prateekbh]

@Kiricon I would favor giving access to the complete template to give full flexibility to the dev.

[Kiricon]

@prateekbh Sounds like an excellent idea, where do you think we should make the template.html accessible from?

[Kiricon]

@prateekbh The more I look at the project structure the more I think that template.html should be available from the root directory of the user's project.

[Kiricon]

@prateekbh Let me know what you think of the pull request, It's a very strait forward implementation so let me know if you have any ideas for a more elegant solution.

[developit]

I was thinking just index.html since that's what the file is called after build - seems nice to have parity there. It'd be wherever your "src" directory is located, so src/index.html, or just index.html if you have no src dir.

Only issue we'll run into will be whether to inject things into a custom template. Personally I think we need to, since there's a bunch of stuff like link rel=preload and manifest colors, but I know some might find this overbearing. Perhaps template.html VS index.html would fix that - template would still be processed by html-webpack-plugin, whereas index.html would be left mostly untouched.

[Kiricon]

@developit Continuing on your comments from PR #58 perhaps we should stead of including template.html/index.html in each create project, make it included in a new create/single create.
Despite that uses would still have the option to add a template file to their existing project if they would like.

This way the templates are not automatically included in each project, preventing everyone from having a custom template when they don't need it, and still giving people with an interest in having a template the ability to use one.

Making a single create have a template file would be an excellent example for user's looking to add that functionality to their project.

I'm also interest on hearing more feedback on the idea of 'index.html' vs 'template.html'. I'm not certain what the best approach would be myself.

[developit]

That maps well to how people use yeoman - you can use it to create a new project, or just scaffold out new pieces within a project.

[gokulkrishh]

@developit I just noticed the generated index.html in build/ folder doesn't have all meta tags for other platforms. Such as

• Windows phone
• iOS related meta tags. Safari takes the screenshot instead of app icon for add to home shortcut.

Ref - https://demopwa.in/index.html. Check the header part

<meta name="msapplication-TileColor" content="#0288d1">
<meta name="msapplication-TileImage" content="./images/icons/mstile-150x150.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Progressive Web Application">
<meta name="application-name" content="Progressive Web Application">
<link rel="apple-touch-icon" href="./images/icons/apple-touch-icon.png">

[SaraVieira]

@developit @reznord Want a PR for adding these in the default index ?

[reznord]

Umm....I really don't want to expose the index.html.

If they user really wants he can pass on a custom template while preact build & preact serve

[thangngoc89]

This should be closed since you can add whatever tag you want by passing template flags to the cli

[sdbondi]

To give an example of a custom template: preact build --template [path to template] and preact watch --template [path to template]

[garrett-thompson]

How is this closed? There is still no possible way to edit the index.html. CRA allows this...

[luatnd]

@mellogarrett It's possible, but via cli :( (like @sdbondi told)
https://github.com/developit/preact-cli#template

It would be nice if the preact-cli support overwrite without specify cli args

[scriptmaster]

Thanks for the --template flag.

On the project root, I added the template into src with: cp node_modules/preact-cli/lib/resources/template.html src/index.html

edited the src/index.html and modifed package.json scripts of my project repo with:

preact build --template src/index.html

and for npm run dev:

preact watch --template src/index.html

Confirming the issue [ Closed ] since both of these worked (modifications to src/index.html are reflected in build/ and development)

And yes like @luatnd mentioned, It would be nice if Option 1) the preact-cli supports detecting src/index.html when no flag or

2. extended cli option to create under src/ by detfault or
3. template documentation to specifically mention index.html instead, because the wording template is confused with the starter template repo during preact create user/template-repo project-name. Whereas, index.html is usually a lot of commits in the initial stages of a new project.

Otherwise, I am sure lots of new preact users will still reach this closed issue after wondering how to customize index.html

[garrett-thompson]

Something outside of template.html is adding the two lines below:

<link rel="shortcut icon" href="/favicon.ico">
<link href="/style.xxxxxx.css" rel="stylesheet">

Any ideas where those are coming from?

[rbiggs]

Any update on this? With create-inferno-app and create-react-app you get a public folder with

favicon.ico
index.html
mainfest.json

This makes it dead simple to set up a default HTML shell, including static markup for SEO, PWA purposes, etc. And in the src directory there's an index.js file where you can designate what container element you want Inferno or React to render into. The default behavior with preact-cli is that everything just gets inserted into the body tag.

I like Preact a lot, but I can't use it unless I can create projects like Inferno and React do.

[developit]

@rbiggs we have prerendering, which is arguably much better for generating static markup than manually editing an HTML template.

You can still select a custom element to render into with preact-cli:

import { h, render } from 'preact';
import App from './components/app';

render(<App />, document.getElementById('foo'));

[rbiggs]

What I want to do is render the html on the server with Express and have Preact get injected into only the parts that are dynamic. With the cli build (prerender) I can only define the whole page in Preact. Fine, I get an html file. But when I run serve and load that in the browser, the Preact code replaces everything in the body tag. This is not what I'm looking for. I want to be able to create a project where I will be able to write components that will be rendered in the containers created by Express. Without a way to set up a project with static html the way Inferno and React do, I don't see how I can accomplish this. Is there a tutorial somewhere? Honestly, my search foo must have the flu.

I'd like to be able to develop this with the cli, then copy the bundle.js file into my Express project to load in html files. At load time Preact would take over the parts of the page it needs to, leaving the rest alone.

[developit]

I think you're looking for something along the lines of this?

[rbiggs]

Actually, I made my own, so I'm good: https://www.npmjs.com/package/make-preact-app. This does exactly what I needed. Gives me a default html shell that I can change to anything and inject whatever Preact components I need to into wherever.

[johhansantana]

I have the same question as @mellogarrett #51 (comment)

[rafinskipg]

Seriously. Why you want to make it complicated? give access to the index.html or at least document exactly how to do it

[prateekbh]

Next version will just expose template.html to the root dir of project

[givanse]

index.html isn't exposed yet, this ticket should be re-opened

you can just use the template flags on the cli

What if I don't know before hand all the tags I will need or their values at project creation? What if requirements keep changing through the service life of the application? More often than not people will need to change the values in index.html. It should be a workflow supported by default instead of something you opt-in with a build flag.

[ForsakenHarmony]

if you install preact-cli@rc it should copy index.html to your project when you create it

[givanse]

I have an already created project.

It seems like a pre-requisite for using preact-cli is that you need to know all the things you are going to need before you create a project. I was wrestling with CSS pre-processing and the partial answers I've found all had the same shape: "use this template when you create a project".

Coming back to topic, copying the default template and using --template doesn't work.

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

results in

✖ ERROR Template execution failed: TypeError: htmlWebpackPlugin.options.createLoadManifest is not a function
✖ ERROR   TypeError: htmlWebpackPlugin.options.createLoadManifest is not a function

Edit:

it worked once I downgraded my app to "preact-cli": "^2.1.0",

[prateekbh]

Hi thanks for the info. We understand the pain you've gone through.

We are starting to document these pain points here https://preactjs.com/cli

[prateekbh]

I guess a upgrading guide from V2 to V3 should cover this