Why am I getting Application Error with Heroku Pipeline? - reactjs

Setting up a new Pipeline in Heroku. I connected the app to GitHub. Starting with simple React application (via npx create-react-app) in order to see the Pipeline in action, but getting missing -a flag error. I understand that it says it is missing the target application but I don't know why. I've repeated the Pipeline settp several times to the same effect. Have read through the documentation a couple of times and not quite sure why the app is failing.
$ heroku logs --tail
› Error: Missing required flag:
› -a, --app APP app to run command against
› See more help with --help
First, I realized the error was because of it being a React app only, a front-end without a server. So, I spun up an Express server (via https://github.com/mateo-navarrete/create-react-express-app). However, I am getting the same error.
Can anyone offer clarifications on getting a MERN app into Heroku Pipelines? Thanks!

Related

Local Environment working, when pushed up to amplify Uncaught TypeError: Super expression must either be null or a function

Describe the bug:
I have set up an app with CI/CD pipeline with GitHub. I used create react app and various packages. I connected a backend environment that has provisioned graphql and cognito components.
I have different branches connected to different custom domains dev/qa/prod, and have been developing and deploying successfully to the dev branch with little to no issues.
After doing some work I committed the code pushed it up which started the build in amplify.
Locally "npm start running on local host", the app runs with no errors or warnings.
When I look at the deployed app there is a blank screen with this error
I've Tried So Far:
I have worked my way back commenting out components and uninstalling packages to try to nail down a particular spot where I could have introduced something. I ended up just importing App.js with
just a div with Hello in it and it still breaks after being deployed.
The initial error pointed to react-image-gallery (as seen in the picture I'm sharing), so I uninstalled that and got rid of the component but then the error just keeps going down the tree to another component, then another component....
The stack overflow posts about this particular error point to circular dependency issues or importing exporting things incorrectly. Why isn't this showing up locally then? I still took this advice and scoured my code to see if somewhere in my work I introduced something.
Expected behavior
Webb App is working in the local environment, after its built and deployed it is not working.
Reproduction steps
Travel to https://dev.jacobwazydragcourse.click/ open up console
App Id
d2nnfn8ylufs60
Region
us-east-2

Strapi + React deployment on own server

I'm really struggling with deploying my Strapi+React App. I am more of a frontend developer and not so familiar with what happens server side.
So, I have my own server that I want to deploy to, but I can't find any instructions on how to do it....
My Strapi is fine and running on port 1337 and I did npm run build in React to deploy the app in a folder that my domain points to and I get the following error:
Error: {"graphQLErrors":[], "clientErrors":[], "networkError":{}, "message": "Failed to fetch"}
and in the console:
POST https://xx.xxx.xx.xx:1337/graphql net::ERR_SSL_PROTOCOL_ERROR
When I do npm start and then open http://xx.xxx.xx.xx:3000, I get a (partially) blank page and these errors in the console:
GET https://xx.xxx.xx.xx:3000/static/js/bundle.js net::ERR_SSL_PROTOCOL_ERROR
:3000/favicon.ico:1
GET https://xx.xxx.xx.xx:3000/favicon.ico net::ERR_SSL_PROTOCOL_ERROR
So I guess it has something to do with SSL? And I don't know how to fix this...
Will you need any code to help me?
Thank you in advance!! I really appreciate any help!

error when deploying react app to github pages: fatal: could not read Username for 'https://github.com': No error

This is my first time deploying an app to GitHub pages. I have an app in react which I want to host it in GitHub pages. I followed different tutorials (linked below) which almost introduce the same approach. everything is OK but at the end when I run npm run deploy, I receive this error : . I'm somehow new to GitHub and haven't set any config related to SSH key. Is it related? or any idea what the problem is?
tutorial I tutorial II
I tried to solve this issue by SSH. However, I get this error on "npm run deploy" and I'm stuck

HMR Waiting for update signal from WDS... react app

I started learning react from yesterday. So I created new react app using command
npx create-react-app firstapp.
When I opened the console in my browser (firefox),
[HMR] Waiting for update signal from WDS..
I was getting this message. I also tried to print on console using log. But console only shows the above message. I saw various questions on stackoverflow, but none worked. I saw an exact question which matches one, but no one answered it. Please tell me if I had done anything wrong. Did I created the app with correct command or anything else should be added.
Also I want to build MERN stack application. I also encountered with Next.js
Can someone explain what is next.js and difference between next.js and MERN
Any help would be appreciated, please.
Thanks in Advance..
MERN is a stack
Next js is a libarary
MERN is used to develop a full stack application
MERN stands for
MONGODB
EXPRESS
REACT
NODE
I'm sure the OP has figured this out by now, but for the uninitiated webpack developer, here are a few details that will potentially help troubleshoot this problem.
HMR stands for Hot Module Replacement. Its a system that quickly moves changes you make in your development IDE out to your app. See the webpack docs on Hot Module Replacement for more/better info.
The HMR message is normal. This displays every time you test your app out in the browser. It means that the Hot Module Replacement is listening in the background of your browser just in case you update the app in your development IDE and it wants to send that update out to the running app loaded in your browser.
The HMR system in your browser app is listening for communication back from the webpack-dev-server (WDS). Again, refer to the webpack docs on this subject for more/better details.
When you mentioned trying to "print on console using log" it sounds like you have been making and saving updates to your app. Is this the case? If so, and you are still getting the same error, it sounds like your build process may be failing somewhere. Look for errors in your terminal window where you ran "npm start" or whatever command you initiated the build with. If it fails, it may kick you out of the script which means WDS may not be able to send updates. Essentially, your app is no longer in communication with the server. It's easiest to just refresh your browser but it sounds like you may also need to troubleshoot your build process.
Can you attach any of the output from your build script?

Deploying working react cosmosdb app from local to Azure

So I am new with working with react and have followed this tutorial here to assist me. All runs fine following these videos and all locally, but after doing a npm run build and then pushing to Azure via a local git repo, the UI runs as expected, but whenever the UI tries to hit the Express/Node backend, it gets an error that I am not understanding how to resolve. Looking at the build scripts that runs on both, I do not see where or if I need to change an environment variable as it is already hitting the correct port on Azure. What I get is the following:
What do I need to revise for this? Since webpack with the build script in create-react-app seems to do what it needs to, I am not quite sure where things are going wrong.

Resources