After deploying my app, the only thing I see is a blank page staring back at

Looking for assistance with my React app. I made a decision to incorporate Vite into my React application to address some performance issues after the initial development.

Everything is functioning smoothly in my local environment; however, once deployed on Heroku, all I see is a blank page. Any help would be greatly appreciated. Here is a snippet from my package.json:

Frontend:

"scripts": {
        "start": "serve -s build",
        "dev": "vite",
        "build": "tsc && vite build",
        "test": "vite test",
        "eject": "vite eject",
        "preview": "vite preview"
    }

Backend:

"scripts": {
        "data:import": "ts-node ./src/models/seeder.model.ts",
        "data:destroy": "ts-node src/models/seeder.model.ts -d",
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node dist/server.js",
        "postinstall": "tsc ",
        "tsc": "./node_modules/typescript/bin/tsc",
        "watch-node": "nodemon dist/server.js",
        "server": "nodemon ./src/server.ts ",
        "client": "npm start --prefix fa-shop",
        "watch-ts": "tsc -w",
        "deploy": "git add . && git commit -m Heroku && git push heroku main",
        "heroku-postbuild": " npm install --prefix fa-shop && npm run build --prefix fa-shop",
        "dev": "concurrently \"npm run server\" \"npm run client \" "
    }

Here is how the folders are organized:

appBackend --
           -- node_modules/backend
           -- frondend
                      --- node_modules/frontend

View of Heroku deployment https://i.sstatic.net/13DyR.png

typescriptexpressherokutailwind-cssvite

Answer №1

After troubleshooting, I was able to resolve the issue. It turned out that the problem stemmed from the Cors policy (cors()) and Content Security Policy (CSP). I also made some updates in my vite file:

proxy: {
  '/api': {
    target: `https://fashopapp-c129f80f4143.herokuapp.com`,
    changeOrigin: true,
    secure: false,
    ws: true,
  },
},
hmr: { overlay: false }

In addition, I updated my server file by including the cors package with this configuration:

app.use(
  cors({
    origin: 'https://fashopapp-c129f80f4143.herokuapp.com/ ',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Authorization', 'Content-Type'],
    maxAge: 86400,
  })
)

and CSP:

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "style-src-elem 'self'"
  )
  next()
})

I hope this solution can be beneficial for someone facing a similar issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Manage and preserve your node.js/express sessions with this offer

Currently, I am working on a web application that encounters an issue where every time fs.mkdir is called, all the current express sessions are deleted. This causes me to lose all session data and I need a solution to keep these sessions intact. I have att ...

javascriptnode.jsexpressredis

Rendering a Jade file in Node.js when a button is clicked

I'm working on a project where I have a page with buttons, and I want to render different jade files based on which button is pressed. Here's a simple example of what I have so far: test.js /* * Module dependencies */ var express = require(&a ...

node.jsexpresspug

Is there a method to retrieve non-file data fields in a multipart/form-data POST request prior to processing the file?

Currently, I'm in the process of developing middleware to manage image uploads for my Node.js application. Everything has been smooth sailing with the multiparty module, but a challenge has presented itself. I am attempting to access certain fields in ...

node.jsfile-uploadexpress

Using Angular 2: Applying a specific class to a single element with [ngClass]

I have a header table with arrows indicating sorting order, using Bootstrap icons. However, when I click on a column, all columns receive the icon class. Here is an example of what I mean: https://i.sstatic.net/CAS81.png Below is the code snippet: HTML ...

twitter-bootstrapangulartypescriptbinding

The search for 'Renderer2' in '@angular/core' did not yield any results

After successfully installing Angular Material in my Angular Project by following the instructions provided in the Material documentation, I encountered some issues. Specifically, when attempting to launch the application with 'npm start', I star ...

angulartypescriptvisual-studio-codeangular-material2

How can I dynamically pass attributes/parameters to openDialog function?

I am looking to dynamically pass the ID 59dc921ffedff606449abef5 to the MatDialog. Currently, I have hardcoded this ID for testing purposes. Despite multiple attempts, I have been unable to successfully retrieve the ID dynamically for the function call. I ...

jsonangulartypescriptangular-material2

CORS header not being set by Express Middleware

I've been tinkering with setting the CORS headers for an express app, but I can't seem to get it right: app.use(function(req, res, next){ res.append('Access-Control-Allow-Origin','*'); res.set("Access-Control-Allow-Me ...

node.jsamazon-web-servicesexpressamazon-ec2cors

Unraveling nested elements with the array map() method in Angular2 and Typescript: Fixing the issue of undefined property reference while mapping

Hey there! I'm currently working with Angular 4 and I have a piece of code that parses data from an API into a TypeScript array of rows. It's important to note that the code functions properly if elements like 'item.tceCampRun' and &apo ...

javascriptangulartypescript

Automatically log in a user once their email has been verified using Express and Passport

Is there a way to automatically log in a user after they click their email verification link? Any suggestions on how to achieve this functionality? Edit: Surprisingly, it was just a matter of setting req.session.passport.user = newUser._id It turns ou ...

node.jsexpresspassport.js

Fetch image from Node REST API and insert into img.src on the client-side

I have images stored in MongoDB as base64 strings and I've set up an Express route to retrieve an image by its id: router.get('/:userId/images/:imgId', (req, res) => { Image.findOne( { _id: req.params.imgId }, (err, img) => ...

htmlnode.jsmongodbexpressmongoose

Cross-component communication in Angular

I'm currently developing a web-based application using angular version 6. Within my application, there is a component that contains another component as its child. In the parent component, there is a specific function that I would like to invoke when ...

javascriptangulartypescriptcomponents

Strange occurrences with Typescript compiler when interface doesn't align

There's something strange happening with the Typescript compiler when I use an interface in certain cases. For instance, everything works perfectly fine here with no errors: interface Bar { letter: 'a' | 'b'; } declare class F ...

typescriptcompiler-errors

Backup your MySQL database using ExpressJS and SequlizeJS libraries

Hey there! I'm currently working on an ExpressJS RESTapi project that uses SequlizeJS as its ORM for a MySQL database. I need to figure out how to create a backup of the database and store it locally. Any suggestions on how to accomplish this within E ...

node.jsexpresssequelize.js

What is the method for incorporating sorting into a mat-list?

I've searched for various solutions, but none seem to work with mat-list. It's crucial for me because mat-list is the only solution where drag&drop functionality works (I always face this issue with mat-table in tables and I can't find a ...

angulartypescriptlistangular-material

How to filter specific attributes from a JSON object and transform them into an observable with RxJS

Consider the JSON data that is being received: { "events": [... ], "total": 12341, "students": [ { "id": 1, "first_name": "John", " ...

jsonangulartypescriptrxjsrxjs-observables

What is the best way to find the common keys among elements in a tuple type?

type Tuple=[{a:string,x:string,z:string},{b:string,x:string,z:string}] type IntersectionOfTupleElementKeys<T>=... type MyType = IntersectionOfTupleElementKeys<Tuple> // = ('a'|'x'|'z')&('b'|'x&ap ...

typescript

Discover the process of navigating a component without revealing the root component

https://i.sstatic.net/V6NT1.png App-routing.module.ts const routes: Routes = [ {path:'candidate', component: SearchbyNameComponent}]; CandidateList.component.html <div class="Candidates"> <table class="list" c ...

javascripthtmlangulartypescript

Encountering errors while attempting to share files in a system built with Node.js, Express,

This snippet shows my Node.js code for connecting to a database using Mongoose const mongoose = require('mongoose'); function connectDB() { // Establishing Database connection mongoose.connect(process see your Naughty's you're sure ...

javascriptnode.jsexpress

The Cloudinary setup does not retrieve information from the .env file

I am currently integrating Cloudinary with my node.js project... Unfortunately, I have encountered an issue where cloudinary.config is not able to read data from the .env file. Instead, I am required to input them directly into the code! const cloudinary ...

javascriptnode.jsexpresscloudinarydotenv

Combining Arrays with Typescript or JavaScript

I'm facing difficulty in merging two arrays into one. I have created an interface to retrieve data from MongoDB. export interface IWeeklyAssessmentData { dayName: string; dayDate: string; fromDb: boolean; } Here is a sample of the data fetched ...

javascripttypescriptvuejs2