Building static either excludes css/js or includes it twice

[productiveme]

I'm having an issue to build a static website using marko-starter. The site runs beautifully when running through marko-starter server, but when I try to build a static version, the generated html includes no css in the <head/> section. I then add the <lasso-head/> to see the same css reference loaded twice. The same applies to the js references in the <body/>: nothing appears without the <lasso-body/> and its referenced twice with it. Strangely I don't see any of the onMount code running in the static site either, tried to console.log without success.

In the marko-starter build output I get the following errors, but don't know if it might be related:

Render async fragment error (lasso-slot:head). Exception: Error: Async fragment (lasso-slot:head) timed out after 10000ms
    at Timeout._onTimeout (/.../node_modules/marko/dist/runtime/html/AsyncStream.js:190:33)
    at ontimeout (timers.js:471:11)
    at tryOnTimeout (timers.js:306:5)
    at Timer.listOnTimeout (timers.js:266:5)

[productiveme]

In terms of the onMount code not running in the static site, the easiest to replicate is to do

marko create test
cd test
npm i
npm run serve-static

The interactivity is all broken.

When rebuilding, I also have to rm -rf .cache dist folders first, or I see the dist/ folder reduced to html only, all other assets are removed.

[JeffSpies]

Are you running the code in branch: master?

[productiveme]

After doing a

npm i -g marko-cli
marko create test
cd test
npm run serve-static

I have the client interactivity back, so perhaps I had a broken or old installation.

I still have the issue where a bigger static website is failing to build properly, the log has errors about the lasso-slot:head timing out, see the attached output.
build.log

[productiveme]

If this can help someone ... the way I am able to publish my static site is to follow the following very hacky and manual procedure:

1. rm -rf dist .cache && NODE_ENV=production marko-starter build clear old files and build production version (generates non-working html)
2. NODE_ENV=production marko-starter build - removes all the assets from the root of dist/ and only leaves behind the broken html, but gives the site structure
3. NODE_ENV=production marko-starter server - start the server in production mode
4. Open the browser and save each page (HTML-only) over the accompanying index.html in dist/
5. cp -R .cache/static dist/ - copy the static folder from .cache/ into dist/
6. (In my case) copy the missing code from component-browser.js into the <script> section at the bottom of the generated dist/.../index.html files
7. For sanity check, run NODE_ENV=production marko-starter serve-static and test in browser
8. Deploy contents of dist/ folder

[gavinmcfarland]

I'm running into the same issue. 😢

[gavinmcfarland]

I had some luck. I learnt that you can manually specifiy for the static files to be added to the dist folder by adding outputDir: __dirname + '/dist/' to your project.js file.

For example

const isProduction = process.env.NODE_ENV === 'production';

module.exports = require("marko-starter").projectConfig({
	name: "marko-starter-demo", // Optional, but added here for demo purposes
	lassoConfig: {
		plugins: [
			'lasso-marko',
			{
				plugin: 'lasso-postcss',
				config: {
					map: isProduction ? false : 'inline',
				},
			},
		],

		outputDir: __dirname + '/dist/',
	},
});

The only issue now is that Lasso doesn't seem to be processing PostCSS styles when I run the build command.