Galaxy: settings.json and css issues

deployment
1

Hi there!

I was trying to deploy my app in Galaxy, but I got some issues.

1. Settings.json not considered

I’ve inserted my environments variables in a settings.json at the root of the project as following:

{
  "galaxy.meteor.com": {
    "env": {
      "MONGO_URL": "mongodb+srv://...",
      "MAIL_URL": "smtp://...",
      "ROOT_URL": "https://..."
    }
  }
}

but Galaxy seems not consider it during the deployment.
Here’s the message from log:

“Exception while invoking method ‘requestLoginTokenForUser’ Error: You have not provided a mail URL. You can provide it by using the environment variable MAIL_URL or your settings.”

2. CSS and Images are not showing

Another strange thing is that I cannot see images and CSS neither.
I’m using Tailwind CSS for my app, and locally works pretty well.

Any suggestion?

Thx :slight_smile:

2

Right-click a supposed image and copy the url. Access the URL in your browser and check the error.

For the CSS, view page source of the page and copy the css url. Same thing as above to check the error

3

Okay…

Images are loaded correctly.

The issue remains with CSS.
When reach the page I get this:

“@import url(“https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap”);@tailwind base;@tailwind components;@tailwind utilities;body{@apply font-roboto text-white bg-slate-800}”

As I said, I’m using TailwindCSS.

4

I don’t use tailwind but seems you are not running the required build step for your css

5

Are you using Push to Deploy or the CLI?
If you are using the P2D, you should point to your settings file here

Screenshot 2023-06-27 at 15.53.36
Screenshot 2023-06-27 at 15.53.36791×783 42.1 KB

and if you are using the CLI, remember to use the --settings PATH_TO_SETTINGS when deploying.

6

Ok thank you.

Regards to CSS, locally Tailwind works pretty well. But when I build my app through Galaxy, the “merged-stylesheet” wouldn’t be generated.

Any help?

7

How is your tailwind configuration in your Meteor project?
Is it following the same here in this example? GitHub - fredmaiaarantes/meteorjs-template: Boost your productivity. Start using MeteorJS today.

8

I’ve followed what is reported in TailwindCSS documentation to install it in a Meteor’s project.

After that, I thought that the build system in Galaxy could take care of it. But I wrong.

At this point I need to know how to configure it, but I cannot find any good documentation.

Can you help me?

Thanks

9

Galaxy build system is actually the Meteor build system, nothing fancy or special in Galaxy.

You should be able to build locally and reproduce the same issues.

I’m using TailwindCSS and Meteor for a long time without any issues, both in Galaxy and in zCloud.

You can check this template and compare with your configurations.

10

I’ve matched your configuration, but it seem Meteor build on galaxy still doesn’t work.
Locally, when I run my app, is working fine.

My package.json:

{
  "name": "sonuspark",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "meteor": "./run-meteor.sh --settings settings.dev.json",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.20.7",
    "@hookform/resolvers": "^3.1.0",
    "@types/meteor": "^2.9.2",
    "@types/meteor-mdg-validated-method": "^1.2.5",
    "handlebars": "^4.7.7",
    "i18next": "^22.5.1",
    "i18next-browser-languagedetector": "^7.0.2",
    "i18next-fs-backend": "^2.1.5",
    "i18next-http-backend": "^2.2.1",
    "meteor-node-stubs": "^1.2.5",
    "mjml": "^4.14.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-hook-form": "^7.44.3",
    "react-i18next": "^12.3.1",
    "react-router-dom": "^6.12.1",
    "simpl-schema": "^3.4.1",
    "yup": "^1.2.0"
  },
  "devDependencies": {
    "@types/mjml": "^4.7.1",
    "@types/mocha": "^8.2.3",
    "@types/node": "^18.13.0",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/react-helmet": "^6.1.6",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.24",
    "postcss-load-config": "^4.0.1",
    "tailwindcss": "^3.3.2",
    "typescript": "^4.9.4"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.tsx",
      "server": "server/main.ts"
    },
    "testModule": "tests/main.ts"
  }
}

My “.postcssrc.js”:

module.exports = (ctx) => {
  // This flag is set when loading configuration by this package.
  if (ctx.meteor) {
    const config = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    };

    if (ctx.env === "production") {
      // "autoprefixer" is reported to be slow,
      // so we use it only in production.
      config.plugins.autoprefixer = {
        overrideBrowserslist: ["defaults"],
      };
    }

    return config;
  } else {
    return {};
  }
};

Any suggestion? Thx.

11

Did you try to run with --production locally?

12

Yes, I tried. It works without any issue. :tired_face:

13

Still stucked! Any help?

I’ve also opened a support request in Galaxy.

I suspect Galaxy’s build system is not properly compiling and minifying TailwindCSS.

Locallly works fine, even when I test my build with —production flag.

14

Did you do this? Install Tailwind CSS with Meteor - Tailwind CSS

15

Yes, I did. And locally it works.

16

Okay…

I tried to deploy my app in AWS Beanstalk via Mup and It works. Tailwind CSS has been compiled correctly.

I suspect Galaxy’s build system doesn’t minify properly version 3 of Tailwind.

JFYI.

17

Update:

For those who have the same issue, put your packages (Tailwindcss and Postcss) in the DEV dependencies.

Now it works!

Thanks to the support’s team.

18

Looking at your earlier post, they seem they were the first time. Not sure what you mean.

19

In summary:

I tried to deploy my app on Galaxy but Tailwindcss didn’t works.
Then I contacted Support’s team that explain me to install my dependencies without “-D” flag (as TailwindCSS official docs suggests to do).

Doing that, now TailwindCSS is compiled correctly in production.

That’s all!

20

In your post 4 days ago, dependencies seem right.

Screen Shot 2023-07-05 at 3.43.34 PM

What -D changed compared to 4 days ago?

-D, --save-dev: Package will appear in your devDependencies.