App css and js build issue

[Albino]

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/

[Albino]

#!/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

[Albino]

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

Anyone?

[Jade_Paoletta]

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?

[Albino]

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"

[Jade_Paoletta]

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

[Albino]

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

[Albino]

Update: CSS now works when compiling assets using this . 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:

2. Database connection issue:

Its errors after errors now .

Thank you in advance for helping me

[Albino]

Update: Everything works fine now!

DB Connection
CSS building on prod
JS packages working

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

[Albino]

Deploy Phoenix 1.6 / Elixir 1.3 on Render.com: A Working Guide