Multiple concurrent instances of preact-cli interfere

[peabnuts123]

Do you want to request a feature or report a bug? A bug

What is the current behaviour? I am developing 2 projects simultaneously (Chromecast Sender and Receiver apps). They both need to include custom scripts and whatnot which I have chosen to do with a custom template (i.e. src/template.html). I would prefer these scripts to load immediately which is why I am not including them using something like preact-head. However, when I am running preact watch in both of these projects at the same time, they seem to interfere. The biggest symptom of this is whichever app was started latest overrides the template of the other app i.e. they will always use the same template file, even when I specify separate templates specifically using --template src/template.html.

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

1. Make 2 projects e.g. preact create
2. Create a custom template in each project e.g. cp node_modules/preact-cli/lib/resources/template.html src/template.html
3. Add something unique to each template e.g. <h1>Application A</h1>
4. Run preact watch --port 8080 --template src/template.html and preact watch --port 8081 --template src/template.html in each project, respectively
5. Observe that both apps have the same template e.g. they will both say "Application A"

What is the expected behaviour? Both projects should have their own templates.

Please mention other relevant information. I assume this is some kind of caching issue with Preact. Where are these caches stored? Is there a way I can work around this? e.g. by specifying a different build cache directory for each project

Please paste the results of preact info here.

Environment Info:
  System:
    OS: macOS 10.15.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Safari: 13.0.5
  npmPackages:
    preact: ^10.3.1 => 10.3.2 
    preact-cli: ^3.0.0-rc.10 => 3.0.0-rc.10 
    preact-router: ^3.2.1 => 3.2.1 
  npmGlobalPackages:
    preact-cli: 3.0.0-rc.10

[developit]

@peabnuts123 are you running these apps on different ports? By default CLI runs on :8080, but you can do PORT=8081 preact watch to change to any other port.

[peabnuts123]

@developit Yeah, I am running them on different ports. Apologies for leaving out that crucial detail 😅 I have updated the original question too. I have just tried using vastly different and non-default ports too, but it didn't change anything.

Another note, when the second app runs, you can see a recompile is briefly triggered in the first one.

[peabnuts123]

Here is a little script to reproduce the issue:

# Create 2 projects
preact create default app_a;
preact create default app_b;

# Setup app A
cd app_a;
sed -i '' 's/\<\/body\>/<h1>App A Template<\/h1><\/body>/g' src/template.html
sed -i '' 's/preact watch/preact watch --port 8080 --template src\/template.html/g' package.json

# Setup app B
cd ../app_b;
sed -i '' 's/\<\/body\>/<h1>App B Template<\/h1><\/body>/g' src/template.html
sed -i '' 's/preact watch/preact watch --port 8081 --template src\/template.html/g' package.json

This sets up 2 projects and modifies their templates / "dev" scripts. Run this script and then run npm start in each folder, in 2 terminals. You will see that at the bottom of the page in BOTH projects (you may have to scroll) is the word "App B Template" (or "App A Template", depending on which one you started last). The point is that they will both have the same message.

[peabnuts123]

Apologies @developit I'm not sure the script I posted in my previous comment works properly. I've updated it here. It also installs the latest versions of preact and preact-cli in each project:

#!/usr/bin/env bash

set -e;
set -x;

function setup_project() {
  # Parse args
  project_name="${1}";
  template_name="${2}";
  port="${3}";

  # Create preact project and cd into it
  preact create default "${project_name}";
  pushd "${project_name}";

  # Write template.html
cat << TEMPLATE > src/template.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title><% preact.title %></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">
		<link rel="apple-touch-icon" href="./assets/icons/apple-touch-icon.png">
		<% preact.headEnd %>
	</head>
	<body>
		<% preact.bodyEnd %>
		<h1>Template: ${template_name}</h1>
	</body>
</html>
TEMPLATE

  # Patch package.json 'preact watch' command
  sed -i '' "s/preact watch/preact watch --port ${port} --template src\/template.html/g" package.json;

  # Update preact dependencies
  npm i preact@latest;
  npm i -D preact-cli@rc;

  # Return from directory
  popd;
}


# Setup app A
setup_project "app_a" "Application A" "8080";

# Setup app B
setup_project "app_b" "Application B" "8081";

This will set up two projects called app_a and app_b in the current directory, each with different template files. Run npm run dev from both directories at the same time, and observe that both pages will have <h1>Template: Application A</h1> at the bottom (or <h1>Template: Application B</h1> - whichever project was run second).

~About the only way I can get around this right now is to run a production build under nodemon which will do a full re-compile any time the code changes. Any advice here?~

Update: I've just realised that even running preact build will interfere with an instance running preact watch - so merely running a production build while another app is serving a development bundle will cause the template to be overridden.

[rschristian]

Corrected in #1336

We always used the same temp file location, resulting in overwriting and conflicts.