# React App returns a blank page on live site. Works perfectly on localhost

**URL:** <https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583>\
**Category:** Support\
**Tags:** deployment\
**Created:** [September 15, 2022, 11:40am UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583 "2022-09-15T11:40:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![DirkG](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/dirkg/32/41329_2.png) [@DirkG](https://answers.netlify.com/u/DirkG)\
**Post date:** [September 15, 2022, 11:40am UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583/1 "2022-09-15T11:40:35Z")

</div>

Hello!

I have deployed a React project to Netlify. The project build works perfectly on my localhost and no errors pop up, however, after deploying to Netlify all I get is a blank screen. [[Repo link](https://github.com/DirkGaston/prueba-react-I)] [[Here is the live site](https://bright-maamoul-034f0c.netlify.app/)]

Deploy log:

8:22:24 AM: Creating deploy upload records  
8:22:25 AM: Starting post processing  
8:22:25 AM: Post processing - HTML  
8:22:25 AM: Post processing - header rules  
8:22:25 AM: Post processing - redirect rules  
8:22:25 AM: Post processing done  
8:22:29 AM: Site is live ✨

Build Settings:

 ![Build Settings](https://global.discourse-cdn.com/netlify/original/3X/4/3/431c7363ffc1223211692672ddec4189c5083bab.png)

Any help will be much appreciated

- Dirk G

---

<div class="post-metadata">

**Author:** ![coelmay](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/coelmay/32/24427_2.png) [@coelmay](https://answers.netlify.com/u/coelmay)\
**Post date:** [September 15, 2022, 11:44am UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583/2 "2022-09-15T11:44:48Z")

</div>

Hey @DirkG

If you look at the page you’ll see

```auto
<script type="module" crossorigin="" src="/prueba-react-I/assets/index.494f3a27.js"></script>

```

Notice the `src` path is prefixed with `/prueba-react-I/` when the app is deployed at the domain root (`/`.)

This is due to the `base` setting in the [`vite.config.js`](https://github.com/DirkGaston/prueba-react-I/blob/main/vite.config.js#L6)

```auto
  base: "/prueba-react-I/",

```

Remove the base, or set it to `/` and try deploying again.

---

<div class="post-metadata">

**Author:** ![DirkG](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/dirkg/32/41329_2.png) [@DirkG](https://answers.netlify.com/u/DirkG)\
**Post date:** [September 15, 2022, 12:03pm UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583/3 "2022-09-15T12:03:28Z")

</div>

Thanks @coelmay that DID indeed do something, at least now I see the background image and the favicon, still no content beyond that though ☹

---

<div class="post-metadata">

**Author:** ![coelmay](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/coelmay/32/24427_2.png) [@coelmay](https://answers.netlify.com/u/coelmay)\
**Post date:** [September 15, 2022, 12:29pm UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583/4 "2022-09-15T12:29:48Z")

</div>

I cloned your repository and built it locally. After cloning and installing dependencies, I ran `npm run build` then `serve dist` (run `npx serve dist` if you don’t have `serve` installed globally). When I view the built site, I also see no content, so this indicates an issue with your app, not the way Netlify builds it.

---

<div class="post-metadata">

**Author:** ![DirkG](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/dirkg/32/41329_2.png) [@DirkG](https://answers.netlify.com/u/DirkG)\
**Post date:** [September 15, 2022, 12:45pm UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583/5 "2022-09-15T12:45:31Z")

</div>

I guessed as much but it does work fine when I run it locally. I just don’t know where else to look or what to change, I don’t see how I can identify the issue. Any pointers would be very helpful.

---

<div class="post-metadata">

**Author:** ![coelmay](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/coelmay/32/24427_2.png) [@coelmay](https://answers.netlify.com/u/coelmay)\
**Post date:** [September 15, 2022, 12:53pm UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583/6 "2022-09-15T12:53:55Z")

</div>

When I run `npm run dev` I still don’t see any content. Same when I run `npm run build && npm run preview`.

However I see no errors, nothing to provide any indication as to the source of the issue.

---

<div class="post-metadata">

**Author:** ![DirkG](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/dirkg/32/41329_2.png) [@DirkG](https://answers.netlify.com/u/DirkG)\
**Post date:** [September 15, 2022, 3:13pm UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583/7 "2022-09-15T15:13:43Z")

</div>

I have made some changes and at least the Home page does display now. It had something to do with the base directory in vite.config.js. However, now the next problem I’m facing is that whenever I click on one of the links I have on my Navbar, I get a 404 page. I’m routing with react-router. Any idea what this could be? I have added a netlify.toml file to my root directory with the following configuration:

[[redirects]]  
from = “/\*”  
to = “/index.html”  
status = 200

However this has not helped.

[[https://astounding-entremet-db265a.netlify.app/](https://astounding-entremet-db265a.netlify.app/)Here is the new deployed site]

---

<div class="post-metadata">

**Author:** ![coelmay](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/coelmay/32/24427_2.png) [@coelmay](https://answers.netlify.com/u/coelmay)\
**Post date:** [September 15, 2022, 9:34pm UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583/8 "2022-09-15T21:34:50Z")

</div>

> [@DirkG](#):
>
> I’m routing with react-router.

Not quite. The links in your navigation are using standard HTML `<a>` elements e.g.

```auto
<a
  href="/musica"
  className="block py-2 pr-4 pl-3 hover:text-white active:text-white"
  aria-current="page"
>
  Escucho Música 🎼
</a>

```

instead of the React Router [`<Link>`](https://reactrouter.com/en/main/components/link) component e.g.

```auto
<Link to="/">Home</Link>

```

---

<div class="post-metadata">

**Author:** ![DirkG](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/dirkg/32/41329_2.png) [@DirkG](https://answers.netlify.com/u/DirkG)\
**Post date:** [September 15, 2022, 10:19pm UTC](https://answers.netlify.com/t/react-app-returns-a-blank-page-on-live-site-works-perfectly-on-localhost/75583/9 "2022-09-15T22:19:18Z")

</div>

That was it! Silly me, thank you so much for that. I didn’t really pay attention to that because it was working locally so it didn’t cross my mind.

Thanks again!