Remix react iis

Question

I have some problems with IIS when using IIS for the React remix application. I use npm run build to use the application in production and npm start, and in the IIS use the reverse proxy when using the IIS URL in the browser to return to my application but the CSS styles are not in my application. This is my web.config

<? xml version = "1.0" encoding = "UTF-8" ?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="ReverseProxyInboundRule1" stopProcessing="true">
            <match url="(.*)" />
            <action type="Rewrite" url="http://localhost:54058/{R:1}" />
          </rule>
        </rules>
      </rewrite>
      <defaultDocument>
        <files>
          <add value="root.jsx" />
        </files>
      </defaultDocument>
    </system.webServer>
  </configuration>

and this is my package.json

{
  "name": "reporteempleados",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix build",
    "dev": "remix dev --manual",
    "start": "remix-serve ./build/index.js"
  },
  "dependencies": {
    "@remix-run/css-bundle": "^2.0.0",
    "@remix-run/node": "^2.0.0",
    "@remix-run/react": "^2.0.0",
    "@remix-run/serve": "^2.0.0",
    "axios": "^1.5.0",
    "dotenv": "^16.3.1",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dotenv": "^0.1.3",
    "react-hot-toast": "^2.4.1",
    "sweetalert2": "^11.7.28"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.0.0",
    "@remix-run/eslint-config": "^2.0.0",
    "eslint": "^8.38.0"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

This is the error that is shown in the console of the browser Failed to load resource: the server responded with a status of 404

I would like to solve my problem and see the CSS styles in my application

Answer 1

I think the browser can't find the CSS files, which may be due to the way you've configured IIS or the paths in your application. In your package.json file, check the "homepage" field. It should be set to the base URL where your application is hosted.

Answer 2

The script is perfect. However, there's a potential issue that could be causing the problem you're experiencing.

In your "start" script, you're using remix-serve to serve your application from the build directory. This is generally fine for development. Still, when you deploy your application to a production server like IIS, you may encounter issues with routing and asset paths. This could be related to the 404 error for your CSS files.

To address this, you can modify your "start" script to serve your application with Express or another server that can handle routing and static assets properly.

then Create a server.js file at the root of your project and configure it to serve your Remix application, handle routing, and static assets correctly.

This Express server will serve your Remix application and handle static assets correctly, which should help resolve the issue.