App css and js build issue

Probably a dumb question:

My app css doesn’t seem to build correctly.

my build.sh:

#!/usr/bin/env bash

# exit on error
set -o errexit

# Initial setup
mix deps.get --only prod
MIX_ENV=prod mix compile

# Compile assets
MIX_ENV=prod mix assets.deploy
# npm install --prefix ./assets
# npm run deploy --prefix ./assets
# mix phx.digest

# Build the release and overwrite the existing release directory
MIX_ENV=prod mix release --overwrite

# Run migrations
_build/prod/rel/alvin_and_eloisa/bin/alvin_and_eloisa eval "Release.migrate"

Phoenix 1.6
Elixir 1.12.2
TailwindCss

https://kasalang-alvin-and-eloisa.onrender.com/

#!/usr/bin/env bash

# exit on error
set -o errexit

# Initial setup
mix deps.get --only prod
MIX_ENV=prod mix compile

# Compile assets
npm install --prefix ./assets
npm run deploy --prefix ./assets
mix phx.digest

# Build the release and overwrite the existing release directory
MIX_ENV=prod mix release --overwrite

# Run migrations
_build/prod/rel/alvin_and_eloisa/bin/alvin_and_eloisa eval "Release.migrate"


Trying to compile assets using npm above, returns this error on my installed packages

Update: Build is now successful BUT still the CSS and JS returns 404

Anyone?

Hi @Albino,

Sorry for the delay here. I just checked your app and it looks like you were able to get the css to load. Did you need any further assistance here?

1 Like

Yes, I still need assistance, I just manually added the css codes there so it seems to be working but I still haven’t resolved my problems, CSS and JS are STILL not building/loading upon prod deployment.

My current configs are as follows:

mix.exs

  defp aliases do
    [
      ...
      "assets.deploy": [
        "cmd --cd assets npm run deploy",
        "esbuild default --minify",
        "phx.digest"
      ], 
   ...
    ]
  end

package.json

{
  "scripts": {
    "deploy": "NODE_ENV=production tailwindcss --postcss --input=css/app.css --output=../priv/static/assets/app.css --minify"
  },
  "dependencies": {
    "cogo-toast": "2.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-phoenix": "file:../deps/react_phoenix",
    "tailwindcss": "^2.2.19"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "autoprefixer": "^10.3.1",
    "postcss": "^8.4.5",
    "postcss-cli": "^8.3.1",
    "postcss-import": "^14.0.2",
    "tailwindcss": "^2.2.19"
  }
}

build.sh

#!/usr/bin/env bash

# exit on error
set -o errexit

# Initial setup
mix deps.get --only prod
MIX_ENV=prod mix compile

# Compile assets
MIX_ENV=prod mix assets.deploy
# npm install --prefix ./assets
# npm run deploy --prefix ./assets
# mix phx.digest

# Build the release and overwrite the existing release directory
MIX_ENV=prod mix release --overwrite

# Run migrations
_build/prod/rel/alvin_and_eloisa/bin/alvin_and_eloisa eval "Release.migrate"

Thanks @Albino. Can you try removing NODE_ENV=production from your package.json deploy command?

1 Like

Same result, with new WebSocket issue causing it to always load.

Update: CSS now works when compiling assets using this :arrow_down:. rather that MIX_ENV=prod mix assets.deploy

npm install --prefix ./assets
npm run deploy --prefix ./assets
mix phx.digest

New Issues:

  1. Websocket connection failed:

Screen Shot 2021-12-19 at 8.34.45 PM

  1. Database connection issue:

Its errors after errors now :sweat_smile:.

Thank you in advance for helping me :blush:

Update: Everything works fine now! :tada: :confetti_ball:

:white_check_mark: DB Connection
:white_check_mark: CSS building on prod
:white_check_mark: JS packages working

I will be creating a blog about this and updating this last reply soon.