Preact-cli: What is the purpose of `preact serve`

[oren]

1. The docs say: Start an HTTP2 static fileserver. When do I need to run it?
2. When I run it I see the following

Listening on https://localhost:8080...
  http: TLS handshake error from [::1]:50858: read tcp [::1]:8080->[::1]:50858: use of closed network connection

[thangngoc89]

@oren You can use it after run preact build to see the production version of your site before deploying. Many thing is only enable on production (for now) like Service worker, HTTP2 server push, ...

[marvinhagemeister]

The command preact serve is the one you would want to use during development. It supports hot-reloading, and a few other goodies. Basically, whenever you change a code, the browser immediately displays the new changes without having to manually reload the browser.

[lukeed]

@marvinhagemeister Actually serve is the production-like server. What you described is preact watch (which is npm run dev by default). 😅 I've made that mistake too.

[oren]

Here is my understanding:

1. npm start (or preact watch or npm run dev) - run it during development. Supports hot-reloading, and a few other goodies. Basically, whenever you change a code, the browser immediately displays the new changes without having to manually reload the browser.
2. npm run build (or preact build) - create production ready code inside the build folder
3. npm run serve (or preact build + preact serve) - build and run production-like server
4. preact serve - run production-like server (without build)

[marvinhagemeister]

@lukeed oh shoot! That is embarrassing 😅

[lukeed]

@oren that is 100% correct

@marvinhagemeister No it's not -- don't worry about it! :smile:

[developit]

One addendum: currently, npm start will actually check the NODE_ENV environment variable. If it is set to "production", it will run npm run serve. If it's any other value, it will run npm run dev (the development server).

There was some question around this, and I think that's warranted - it's probably worth making sure we're doing the best possible thing here. For my own purposes, I know a lot of hosts assume npm i && npm start will produce a running production server, so I wanted to have that work out-of-the-box for things like now.sh.

[kuldeepkeshwar]

@developit what is the preferred way of hosting preact app in production? npm run serve uses simplehttp2server
but simplehttp2server itself says This server is for development purposes only..
How to take advantage of http2 push when preact app is hosted behind a proxy like Nginx

[thangngoc89]

@kuldeepkeshwar nginx itself doesn't support http2 push so you can't do anything about it.
There are many option to host a static sites with h2 push support.

• use cdns, like cloudflare, they support h2 push by sending the right header
• static hosting service like netlify, firebase hosting, ...

[oren]

I use caddy and I believe it has http2 by default.

On Aug 21, 2017 4:03 PM, "Khoa Nguyen" [e-mail] wrote:

@kuldeepkeshwar https://github.com/kuldeepkeshwar nginx itself doesn't
support http2 push so you can't do anything about it.
There are many option to host a static sites with h2 push support.

• use cdns, like cloudflare, they support h2 push by sending the right
  header
• static hosting service like netlify, firebase hosting, ...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/developit/preact-cli/issues/65#issuecomment-323874744,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAZdYaKOg4ScLlY78Y_NIhscFK1cgIDks5sagzLgaJpZM4NobYF
.

[reznord]

preact serve is used for testing the production build locally where you can test the lighthouse scores, check if there are any performance related issue or not.

[Download]

Sorry to revive this old issue. I am studying up on Preact CLI but there is this one aspect I cannot yet wrap my head around and this issue most closely describes it.

If preact serve is used to test the build, but not really intended for production, then how do we deploy it to production? Because I cannot really find the code in the default project that starts the server. Are we supposed to say, add Express and create a server.js file that then uses the App component? This part is not clear to me yet and I cannot find any docs on it.

[Sigmus]

After you build you are responsible for deploying and serving the generated build folder (which is a static webapp).

[Download]

My confusion is that I did not realize the default template gives a client-side only app. Now it makes sense. Thanks!

[lukeed]

Yo~! serve is actually being removed going forward since it's the largest dependency, least-commonly used, and is really only used for test service workers in a production setting.

We'll include good/better documentation as to how achieve the same actions going forward 👍