gregwolanski / eleventy-tailwindcss-alpinejs-starter Goto Github PK

Example with about.njk

page about is still looking for and of course this is broken.

➜  _site git:(edge) ✗ tree
.
├── about
│   └── index.html
├── img
│   └── firepress-org-tag-article-v1.jpg
├── index.html
├── js
│   └── alpine.js
└── style.css

Hey, great work on this starter.

Would it be possible for you to switch on the "Template repository" option in the settings?

That would mean that users get a "Use this template" button on GitHub

First of all, thanks for your article on CSS Tricks and thanks for contributing an Eleventy Starter. I enjoyed walking through the process and I learned quite a bit walking through the code.

I have a working CodePen that pulls in Alpine (2.4.1), Tailwind and TailwindUI. It works just fine and can be viewed here:

https://codepen.io/sethlbrown/pen/eYYqxQB or in debug mode if you want to see just the working version without codepen's UI: https://cdpn.io/sethlbrown/debug/eYYqxQB

When I try to include just the header that I wrote in my Eleventy build's default.njk, I'm able to view the page.

npm run start works without throwing any errors. However, all of the hover behaviors and the behaviors driven by Alpine.js no longer work in the Eleventy version. I'm able to see that the window.Alpine object exists and it's using version 2.4.1. It's the same version that the CodePen is using. Furthermore, I'm able to click through in the source and see that there's a minifed copy of Alpine.

There's was one Console error that seemed meaningful:

Source map error: Error: request failed with status 404
Resource URL: http://localhost:8080/js/alpine.js?v=1594581372158
Source Map URL: alpine.js.map

I thought adding the following to my .eleventy.js file might help:

  eleventyConfig.addPassthroughCopy({
    "./node_modules/alpinejs/dist/alpine.js.map": "./js/alpine.js.map",
  });

It resolved the error but didn't get the behaviors on the site working.

I'm a rank beginner so I'm not clear from the docs what SourceMap has to do with getting Alpine to work in this context, but I wonder if there might be something missing in the provided .eleventy.js or postcss.config.js file? Again, not sure, but would appreciate your help.

I added my own tailwind.config.js file and that could also be the issue.

I set up a repository in case you want to take a look. There are only two commits on top of the starter.

Thanks for any help you can provide.

missing .

I don't feel the need for a PR

I think on Windows, and potentially other environments, eleventy --serve never actually returns so npx tailwindcss never executes.

On windows and have the cross env stuff setup.

When running npm run start there are no errors, but the style.css doesn't end up in the _site folder.

The build works fine.

log

➜  my-website-name git:(master) npm run build

> @ build /Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/gregwolanski:eleventy-tailwindcss-alpinejs-starter/my-website-name
> ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production postcss styles/tailwind.css --o _site/style.css && cleancss _site/style.css -o _site/style.css

sh: eleventy: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! @ build: `ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production postcss styles/tailwind.css --o _site/style.css && cleancss _site/style.css -o _site/style.css`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/p_andy/.npm/_logs/2021-01-03T21_06_14_594Z-debug.log
➜  my-website-name git:(master) npm run start

> @ start /Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/gregwolanski:eleventy-tailwindcss-alpinejs-starter/my-website-name
> eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch

sh: eleventy: command not found
TypeError: Invalid PostCSS Plugin found at: plugins[1]

(@/Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/gregwolanski:eleventy-tailwindcss-alpinejs-starter/my-website-name/postcss.config.js)
    at /usr/local/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/plugins.js:72:15
    at Array.forEach (<anonymous>)
    at plugins (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/plugins.js:58:13)
    at processResult (/usr/local/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/index.js:33:14)
    at /usr/local/lib/node_modules/postcss-cli/node_modules/postcss-load-config/src/index.js:94:14
    at async Promise.all (index 0)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `eleventy --serve & postcss styles/tailwind.css --o _tmp/style.css --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/p_andy/.npm/_logs/2021-01-03T21_06_28_673Z-debug.log

Hi Greg,

Thanks for putting this together.

I'm new to this, so apologies if the answer to this problem is obvious (I tried searching online but couldn't find anything).

I just downloaded the repo to my computer and am getting this error when running 'npm run build':

'ELEVENTY_PRODUCTION' is not recognized as an internal or external command,
operable program or batch file.
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: ELEVENTY_PRODUCTION=true eleventy & NODE_ENV=production postcss styles/tailwind.css --o _site/style.css
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Any idea why?

Sorry if this is a silly question!

Thanks.