🍋 No styles in production deployment

[crowlsyong]

• I run deno task start on a brand new Fresh Project and everything looks beautiful
• I push to github (repo here)
• I visit dash.deno.dev and make a new project pointed at aforementioned github repo
• I go to cloudflare and configure dns
• I visit the web app and it looks like this

What did I do wrong? Do you need more information to help troubleshoot?

Screenshots: localhost vs advrk.io

Bonus question: I am not familiar with licensing. Can I make my project CC0 1.0, or do I have to use MIT license because that's what Fresh uses, or something else?

[marvinhagemeister]

The tailwind plugin requires ahead of time builds to be set up. It sounds like the deployment mode is still set to "Automatic" in Deno Deploy instead of "GitHub Action".

Switching the deployment mode from "Automatic" to "GitHub Action" will fix the missing styles issue.

Bonus question: I am not familiar with licensing. Can I make my project CC0 1.0, or do I have to use MIT license because that's what Fresh uses, or something else?

I'm afraid that's something a lawyer needs to look into. I don't know enough about the laws in different countries to answer this.

[crowlsyong]

I gave it a go! I don't see any changes. Perhaps now that I am using Github Actions, I need to configure something in github? Is this in the docs? Am I being a nut? I haven't had to do this with my other deployments, what changed?

[marvinhagemeister]

Great, now that Deno Deploy is set up correctly and if the GitHub Actions in your repository are configured correctly as described in Ahead of time builds, then triggering a new deployment will update it. The repository link you posted points to a private repository so I can't check if that part is set up correctly.

I haven't had to do this with my other deployments, what changed?

It sounds like this is the first project where you're using Tailwind CSS instead of Twind. Starting with Fresh 1.6. we're going with the Tailwind CSS plugin when you select the "Tailwind" option in the project initialization wizard instead of Twind. Reason for that is that Twind has been unmaintained for more than a year now, the editor experience is a bit lacking with no autocompletion and generating CSS on every request with Twind is expensive. This change was featured in the release post for Fresh 1.6.

The Tailwind CSS plugin solves all of that, but adds an additional requirement that Ahead of time builds need to be set up. We also have a "Migrating to Tailwind" page in our docs.

[crowlsyong]

yes! this is my first project using Tailwind CSS instead of Twind. Also, I'm sorry that my repo was private, not very helpful of me to make it private haha. I have since made it public. I will configure my setup as you described and report back. Thank you for helping me out and for your patience; I apologize for being somewhat inept, I'm still a hardcore n00b. ❤️

[crowlsyong]

Still working out some issues with converting to tailwind. in the mean time, i built a GPT for Fresh framework by downloading the docs and putting them into 4 master text files. I'm hoping that it will help me convert to tailwind so I don't use up your time (because I'm a n00b and I should probably just figure this out on my own). Find the GPT here

[marvinhagemeister]

@crowlsyong Looking at the repository it seems like the GitHub Actions (=GH Actions) are missing. The way the ahead of time builds work is that you set up GH actions as described here which will build your application inside GH actions and deploy it on Deno Deploy. Then on Deno Deploy you tell it to accept deployments on GH actions and that's it.

[crowlsyong]

First off, Marvin you are so dang patient with me. Thank you, I sincerely appreciate it.

I think that I cannot do that because the _Fresh/static folder which was created contains nothing. The docs say "That folder contains the optimized assets and a snapshot.json file which includes some metadata for Fresh." and this does not occur for me.

more info: Task build deno run -A dev.ts build The manifest has been generated for 5 routes and 1 islands. error: Uncaught (in promise) Error: Cannot find module '@alloc/quick-lru' Require stack:

• /Users/rockmac/Documents/code/vscode/advrk-io/node_modules/.deno/[email protected]/node_modules/tailwindcss/lib/lib/setupTrackingContext.js
• /Users/rockmac/Documents/code/vscode/advrk-io/node_modules/.deno/[email protected]/node_modules/tailwindcss/lib/plugin.js
• /Users/rockmac/Documents/code/vscode/advrk-io/node_modules/.deno/[email protected]/node_modules/tailwindcss/lib/index.js
• /Users/rockmac/Documents/code/vscode/advrk-io/node_modules/.deno/[email protected]/node_modules/tailwindcss/lib/index.js at Function.Module._resolveFilename (node:module:622:15) at Function.Module._load (node:module:500:27) at Module.require (node:module:675:19) at require (node:module:789:16) at Object. (file:///Users/rockmac/Documents/code/vscode/advrk-io/node_modules/.deno/[email protected]/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:17:58) at Object. (file:///Users/rockmac/Documents/code/vscode/advrk-io/node_modules/.deno/[email protected]/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:168:4) at Module._compile (node:module:731:34) at Object.Module._extensions..js (node:module:745:10) at Module.load (node:module:656:32) at Function.Module._load (node:module:537:12)

[MaDsEm88]

@crowlsyong . You can implement Tailwind manually, and then you dont have to use the Github Actions, to make the styling work ( at least not for tailwind ). Go to this link - https://dev.to/iasqiti/replacing-twind-with-tailwind-in-fresh-1j4d . it will only take you a few minutes to setup... If you want to use styling and components from places like https://www.radix-ui.com/ or https://ui.shadcn.com/ you would need to implement the Github Actions for them to work properly..

[marvinhagemeister]

@MaDsEm88 that sounds like more work compared to copy & pasting the example GH action from our docs and updating the project name.

[MaDsEm88]

@marvinhagemeister. I agree the new, way to implement tailwind using npm is easier, and would probably use it if i was starting a new project, but with my current project it breaks a lot of the css styles (more than 400 lines), and would take "some time" to figure out the difference in the two options, since they should work the same...

[marvinhagemeister]

@MaDsEm88 That sounds strange. Would love to know more why it's breaking, given that your setup uses tailwindcss too.

[MaDsEm88]

@marvinhagemeister . As far as I can see the most of the errors has to do when using some of tailwinds custom styles with @layer, If i take those away the code runs as it should with npm, and it also shows the styles on deno.deploy with Github Actions. So I have to go through every @layer style to check which ones breaks when using tailwindcss with npm...

[marvinhagemeister]

@MaDsEm88 that sounds like an issue worth filing over at the tailwindcss repository.

[marvinhagemeister]

@crowlsyong The deno deploy portion is set up correctly for GitHub Actions, but the actual GitHub Actions file is missing. Made a PR to your repo here https://github.com/crowlsyong/advrk-io/pull/1 .

Closing this issue. For anyone coming across this through Google or something else: Follow the steps in our documentation to resolve this. The short summary is:

1. Link project to use GH Actions in Deno Deploy (unlink if already linked first)
2. Copy & Paste the GH Actions file from https://fresh.deno.dev/docs/concepts/ahead-of-time-builds and update the project id accordingly .

If styles still don't show up it means you skipped one of those two steps. Seeing that this seems to happen frequently though we're currently exploring UX improvements on the Deno Deploy side of things, but it's super early.

[crowlsyong]

Marvin you are an absolute legend, did you know that? Thank you and have a wonderful day.

[crowlsyong]

I see an error at https://github.com/crowlsyong/advrk-io/actions/runs/7393490285/job/20113490625 under the "Upload to Deno Deploy", it reads: Run denoland/deployctl@v1 with: project: advrk.io entrypoint: ./main.ts Project: advrk.io Entrypoint: file:///src/main.ts Error: APIError: The project you are requesting was not found, or you do not have access to view it. x-deno-ray: dc0ed614b8521de4a92f72484e12dbb6 If you encounter this error frequently, contact us at [email protected] with the above x-deno-ray.

I am so sorry for my ineptitude.

• I have read the instructions at https://fresh.deno.dev/docs/concepts/ahead-of-time-builds#creating-an-optimized-build
• I have unlinked/relinked my github actions in dash.deno.dev
• I ensured my project/entry point in .github/workflows/deploy.yml match
• I ran deno task build and got my _fresh folder to appear and added it to gitignore via:

# Ignore fresh build directory
_fresh/

• I checked fresh.config.ts, main.ts, and dev.ts to ensure they match the docs at https://fresh.deno.dev/docs/concepts/ahead-of-time-builds but instead of twind- like in the docs- I used Tailwind.

I'm so sorry Marvin, but I can't seem to get my project to show styles. I'm starting to feel a little bummed out with myself...I'm know that I am not a good programmer, but I can usually get...things....to work... Google isn't helping, chatgpt isn't helping, your instructions- while detailed and appreciated- have not solved the issue. I want to start working on my project, but I can't even get the baseline Fresh project to work...I feel sad about this now. I have spent a good few hours reading/rereading the docs and I just cannot comprehend what is happening. I will stop bothering you and I will attempt to find another way to build a URL shortener. I'm sorry to take up your time. Have a good day man. 😥❤️

[marvinhagemeister]

Apologies, this is my error. The error message reads:

Error: APIError: The project you are requesting was not found, or you do not have access to view it.

I picked the wrong project name in the GH actions file when making the PR. Fixed in https://github.com/crowlsyong/advrk-io/pull/2

[kitsonk]

I ran into this issue. The move to tailwind and requiring ahead of time builds for deployment to Deploy is not obvious, this adds quite a bit of friction into the process. In addition, Deploy "detects" a Fresh project automatically and indicates there is no need for a build step.

The experience overall should be more joined up. It used to be straightforward to get a new Fresh app running properly on Deploy, now it is complicated.

ping @lucacasonato

[kitsonk]

Also, just to mention an out of the box deployment of fresh now includes ~4400 assets and takes about ~5 minutes to deploy. Seems to undermine the value proposition quite a lot for Fresh and Deploy. 😞

[marvinhagemeister]

@kitsonk Thanks for sharing your feedback. We're aware of those papercuts with Deno Deploy and are actively working on addressing these. Note that you can still use the twind plugin which is the same as in earlier Fresh versions instead of the tailwind plugin.

Also, just to mention an out of the box deployment of fresh now includes ~4400 assets and takes about ~5 minutes to deploy. Seems to undermine the value proposition quite a lot for Fresh and Deploy.

This is currently a bug in deployctl which uploads the whole node_modules folder instead of excluding it.

[kitsonk]

Note that you can still use the twind plugin which is the same as in earlier Fresh versions instead of the tailwind plugin.

Thanks, I am doing that in my old projects, but I started a fresh Fresh project and though "let's embrace the new instead of the deprecated" especially since it isn't an option in the installer anymore. Generally I have found the development experience to be good, especially with a working IDE plugin again finally. I will miss the grouping. I also haven't dealt with arbitrary CSS which twind's css and apply worked a real treat for advanced use cases in integrating things like syntax highlighters and the like into your app. It will cause a non-trivial rewrite for me to migrate some of my older projects.

The other thing that was a bit of an education was using custom fonts, as twind had an arbitrary "preflight" config option where you could locate your imports as part of your config, but that was a minor nit.

This is currently a bug in deployctl which uploads the whole node_modules folder instead of excluding it.

👍 excellent!

[marvinhagemeister]

@kitsonk Maybe tailwind's @apply is what you're looking for? The preflight can also be extended or disabled, see https://tailwindcss.com/docs/preflight#extending-preflight . To completely overwrite the preflight, disable it as outlined in the link and put your preflight CSS before the @tailwind rules in your css.