How do I get production running on my laptop for troubleshooting

Phoenix Forum Questions / Help
, ,
1

Situation
I’m trying to troubleshoot why some CSS markup is not appearing in my production build. I would like to run the production version of my phoenix application on my laptop to see the final CSS file being served so I can further troubleshoot the situation.

I’m following the docs along but I’m stuck understanding how do I access it in my browser.

I typed in PORT=4001 MIX_ENV=prod mix phx.server

PORT=4001 MIX_ENV=prod mix phx.server
Compiling 19 files (.ex)
Generated blank app
[info] Access BlankWeb.Endpoint at http://example.com

I typed in my browser localhost:4001 but no luck.

# Prod.exs
config :blank, BlankWeb.Endpoint,
  url: [host: "example.com", port: 80],
  cache_static_manifest: "priv/static/cache_manifest.json"

Questions
What settings or misunderstanding do I have on getting a production build running on my laptop?

Thanks

2

Have a look at your config/prod.exs that is the config your build would use for ports, domain name etc.

If you are have having CSS issues, don’t need to rebuild your phoenix app, have a look at the browser with devtools on your prod website. If CSS class is there, is the html there and correct? if css classes are not there then:

It is likely your npm install, deploy for prod or mix phx.digest didn’t go as expected.

3

This is the issue. I’m using:
• Webpack
• Postcss
• Purgecss
• My css is using scss

During production the purgecss rips out unused css and it seems to be removing too much so I’m trying to debug it.

Feedback loop
My approach is to modify the Webpack file settings and then I want to run production and see what changes happen to the production version.

I’m not expert in Webpack + postcss + purgecss + scss.

Question:
Do I need to run mix phx.digest on my local machine first, check it into git and then deploy it to a service like Heroku OR does a service like Heroku run mix phx.digest on my behalf part of the deployment?

4

I am not either, so I don’t trust purgecss to do the right thing with all the .eex, leex, .sface syntax in both sigil form or stand alone file; it make me really uncomfortable. So my css setup is a little bit unusual. I don’t use tailwind’s utility class directly in my code at all; In stead, I made my semantic classes with tailwind’s utility classes then put them in the component layer; then go ahead to purge the whole utility layer.

5

You don’t need to go to all that effort then. Since webpack and phoenix are seperate entities.

  • clear out your priv/static
  • tell your webpack to run prod config and compile.
$ npm run deploy --prefix ./assets
$ mix phx.digest
  • investigate the output in the priv/static to see if your css classes are purged or correct.

I think you need to tell purge where the template files are so it knows which classes to remove or not remove.

1 Like
6

if tailwind is like bulma, bootstrap you can just include necessary components to keep things slim

@import "../node_modules/bulma/sass/elements/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
7

Possible. My way is more explicit in that all the CSS classes I use are written by me. I only use tailwind/postcss as a css macro library/processor to write my classes in a concise way.

All css packages I have used in the past are notoriously bad in backward compatibility. Say I upgrade tailwind from version 1.x to 2.x, many things will stop working. Had I use their classes directly, some of my element will lost style and it is hard to find out which and fix them. With my indirect way, the build will fail so it is easier to fix.

8

using your css as interfaces/adapters for underlying library is definitely the smarter way.

just looked at tailwind and I think one of the reasons I stepped away from it - hating css and have no visual skillset.

@tailwind base;
@tailwind components;

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

@tailwind utilities

that’s why it needs purge

9

exactly. Without purge, tailwind is humongous. But I don’t trust purge. So I gave purge nothing, therefore it will purge everything except the things I protected explicitly in the component layer.

10

@cenotaph You are correct. This is what I should be doing to troubleshoot the situation. I don’t need to be running in production mode. Thanks for the tip.

2 Likes