CSS errors when deploying React app

[maxencel]

Hello!

I’ve been having some troubles deploying my React app as a static app.
The app is correctly deployed and working well, but my App.css file is not taken into account.

When running the app locally, I’ve got no issue, but when deploying on Render, the styles specified in the App.css file are not rendered. For example on the picture below, the logo is supposed to be 40px wide and 40px high, and the banner should take 100% of the width as specified in the App.css.

Have I missed something in the deployment? Thanks!

[bergur]

Hi there

Most likely its just how the stylesheet is referenced/included. You could check the dev tools what error is coming up when the site tries to load your app.css file. Do you have a path to your app you are willing to share?

[maxencel]

Actually there is no error related to the loading of the CSS when I check the dev tools.
Here is the app code: GitHub - mlefort3/Contradept-Web-App-Front

I only configured this for the deployment on Render:

Thanks!

[al_ps]

This looks like a standard “Create React App” project, according to the README of your repo.

If you’re using the defaults and deploying as shown in our guide: Deploy a Create React App Static Site, then the client-side routing rewrite would be /* > index.html.

With regards to the CSS, this will be a code issue. Try running an npm run build locally and look at the resulting files in the build directory it creates, this will be the files/folder structure that is uploaded to the Static Site. It’s been a long time since I’ve used React, so I don’t have any specific pointers here, maybe Google the issue, e.g. Stack Overflow: Why is create react app not importing a css file?

Alan

[maxencel]

Thanks, this was indeed a code issue, which is now solved!

I simply missed an import './App.css'; in my App.js file.

Thanks again, I’ll close the discussion then