I am following this guide to deploy MERN stack app, using heroku and github pages -https://github.com/juliojgarciaperez/deploy-mern
Q1. Do I need to create 2 different repositories, 1 for backend and 1 for frontend to connect to heroku? (t.ex backend repository to the heroku pipeline) I originally developed both backend and frontend under same repository.
Q2. I managed to get the step:3 in guide, and created the new base set up for react app, following the guide mentioned - https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack
after generating the react app using this buildpack command, I replace the src and public with what I have written before, also install the dependencies.
but when I run the git push heroku master command in terminal,
I get errors saying
error: failed to push some refs to 'https://git.heroku.com/apprepositorynamehere.git'
And when I read the process, it says
engines.node (package.json): unspecified
Cannot find module: 'react-router-dom'. Make sure this package is installed.
You can install this package by running: yarn add react-router-dom.
error Command failed with exit code 1.
To solve each problem, I add the node with specified version in package.json
"engines": {
"node": "13.7.0"
},
and also ran the yarn add command to install the react-router-dom
But none of the issues goes away when i re-run the git push heroku master.
I originally create the react app and developed in npm setting not yarn.
I wonder if this is causing the issue where copy pasting my previous src?
I wanted to use the github pages bcs it is easy to deal with but If anyone has any other suggestion, to deploy MERN stack app, I am opened to it!
To anybody who is looking for an answer to my previous question.
I did not use the github page to deploy my MERN stack app,
but used this tutorial 'https://www.youtube.com/watch?v=qdoiwouykAg'
A1. You do not need 2 different repository, but need to configure your package.json in both frontend and backend.
A2. I still see this in terminal, but it does resolve.
Resolving node version 12.x...
Related
Here is my directory structure
app
frontend
backend
I don't have a package.json file in the main directory but both the frontend and backend have package.json files.
The frontend is a fully functional NextJS app and the backend is an Express server handling api/data requests.
I have one repository for the entire app. My goal is to push this app in its current structure to Heroku, set up whatever environment variables I need, and have Heroku deal with the build details. I have yet to find any tutorials or any SO questions that target my instance specifically.
So far I just tried to push the whole repo but this is there error message I'm getting:
remote: Compressing source files... done.
remote: Building source:
remote:
remote: ! No default language could be detected for this app.
remote: HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
remote: See https://devcenter.heroku.com/articles/buildpacks
remote:
remote: ! Push failed
I'm assuming this is because there is no package.json file in the root directory to tell Heroku what to do. I don't have enough experience to know if this really is my problem or not. Unfortunately, I don't really know the direction I need to go here and I'm having a really hard time finding tutorials or any help when I search about this. I'm coming to understand the process and details a little more as I go along but I could definitely use a good explanation as to what I need to do, how I need to do it, and why I need to do it. I know I'm asking for a lot but anything helps. Thank you.
I would suggest restructuring the project so that it has a package.json in the root folder. A simple way to make it work is by letting the Express app serve the NextJS app.
I was having the same issue as you. I realized that deploying a NextJS app isn't as straight-forward as deploying a Create-React-App app. I ended up following the official recommendation of the NextJS team for deployment, which is to let Vercel serve it.
It was actually incredibly easy. I managed to deploy the NextJS app in a matter of minutes. Create a Vercel account, add a new app and deploy it.
The downside of this is that you will use Heroku for deploying your backend, and Vercel for deploying your frontend. But if you are using GitHub for example, Vercel will automatically re-deploy your NextJS app everytime you push to your main branch. So, in actuality you won't even have to do much in Vercel after deploying it the first time.
There are probably other ways and workarounds, but according to Vercel (who by the way are the creators of NextJS), deploying it with Vercel is the easiest way.
I have strapi as backend and react js as frontend developed in separate folders. When doing the development from localhost I have to run npm start for both strapi and react js which both running in two different port.
The thing is, I've been asked to deploy my project to heroku but I have no idea on the deployment process as there is no specific tutorial that I can find for that matter. I found this similar issue as mine here How to deploy Strapi backend and ReactJS frontend to a single Heroku app but the solutions given are not clear to follow.
Should I put the strapi and react js in one folder and add the middlewares like in the solution given then only deploy?
The first thing you need to do is to get a CLI instalation on your machine. After that you need to Login on heroku with the following command:
$ heroku login
After you've done this step you need to clone the repository or the remote location in case you have already a git repo on your localmachine as such.
Remember that before this you need to create a Heroku App on heroku.com first. then follow the step.
$ heroku git:clone -a [my-repository-name]
after you are done with this. Commit your project files. as such.
$ git add .
$ git commit -m "my first project commit front end"
$ git push heroku master
You need to make sure that you have a procfile that is needed in order to run the npm run command. so.. create a file called.
Procfile
(this is the name of the file that needs to be behind src file.
After you have done this. You may continue with the next project. example. this would work only for your frontend application. For the backend application you can create another application and repeat the same steps.
web: npm run start
After cloning the empty repository I created in my Github Enterprise account, I created a CRA (create-react-app) ReactJS application. I created, committed & pushed a README.md file before generating the CRA scaffolding and it got pushed successfully. But, after CRA app got generated, I'm not able to push the code to the GitHub Enterprise server.
Git Bash throws the following error:
remote: fatal: early EOF
Whereas GitHub Desktop throws the following:
error: RPC failed; curl 56 Failure when receiving data from the peer
I have been using GitHub enterprise for NodeJS web app dev for years now and have never faced any issue of such sort but I have not been able to push the CRA based React app scaffolding code.
I have tried referring to the following StackOverflow posts:
Your configuration specifies to merge with the <branch name> from the remote, but no such ref was fetched.?
Git push error '[remote rejected] master -> master (branch is currently checked out)'
Cannot push to GitHub - keeps saying need merge
but those didn't work. Apparently, this use case is unique as the error only gets thrown (from all my experience working with this GitHub enterprise account) when I'm pushing CRA code and no other.
Attachments (Git Bash & GitHub Desktop errors):
This has been answered here: https://stackoverflow.com/a/36843260/1673761
Look here: https://flyingtomoon.com/2011/04/12/git-push-is-failed-due-to-rpc-failure-result56/
The problem is most likely because your git buffer is too low.
You will need to increase Git’s HTTP buffer by setting the git config var “http.postBuffer” to 524288000.
git config http.postBuffer 524288000
I'm fairly new to both development and Heroku but I am working through trying to deploy a react app. I can run the app perfectly fine when I run it locally, however I keep running into issues when I try to deploy to Heroku. It appears to build successfully, however I keep ending up with an application error and when I check the heroku logs I get the following:
heroku logs
When I searched for this syntax error it seems to be pretty popular and it looks like it might have something to do with my index.js file being buried in client -> src -> index.js (I specify this location in my Procfile). What I don't understand though is why this import error doesn't give me any trouble locally, only when I try to push to Heroku.
Edit:
Additional error is logged here. No Demon Errors
I had a similar issue when trying to deploy my first react app to heroku
I found a super simple solution that makes deploying to heroku painless.
Here are the steps I followed to do this:
create-react-app $APP_NAME
cd $APP_NAME
git init
heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildkit.git
git add .
git commit -m "initial commit"
git push heroku master
[https://www.youtube.com/watch?v=zDiQrgeGTuU&t=135s][1] Here is a link to the youtube video I followed.
As far as I can tell the buildpack was the major key here as it did most of the heavy lifting in terms of preparing the app for launch.
I tried this, but got the following error
-----> Building on the Heroku-20 stack
-----> Using buildpack: https://github.com/mars/create-react-app-buildkit.git
! error fetching custom buildpack https://github.com/mars/create-react-app-buildkit.git
! Push failed
I have been building an app with awsamplify for quite some time now. Today I descided to run some test and when I did
npm run start-web
Everythin worked fine. Now I went on to run mobile test with the use of Expo and ran
npm run ios & npm run android
which both returned the following errors.
Unable to resolve "./aws-exports" from "App.js"
Building JavaScript bundle: error
my problem is similar to the one below just its amplify and not awsmobile
https://github.com/aws-amplify/amplify-js/issues/669
Deos anyone know what I can do to resolve this?
Thanks alot!
I jsut removed some unused imports and the error changed to this
Unable to resolve "#aws-amplify/ui/dist/style.css" from "node_modules\aws-amplify-react\dist\Amplify-UI\Amplify-UI-Components-React.js"
Barely mentioned in the AWS docs:
For setting up a local dev folder, from an existing amplify repo, use an amplify env pull,
It will "pull" the ./aws-exports.js from the server, the latest one that was pushed there,
similar to git push and git pull but for the amplify env
It's true that an amplify push will create the ./aws-exports.js file,
but it will also "push" it to the server, overwriting whatever is there.
amplify status is also a handy command, similar to git status
I ran amplify env pull
and then found it in the ./src/aws-exports.js
not sure if the pull did it, or if it was always there but this is for an existing expo project
Confing your projects, using terminal go to the main folder and amplify init to config your project
amplify init
Do you to use an existing environment? (Y/n) Y
Choose the environment you would like to use: dev
Choose your default editor: Visual Studio Code
Choose the type of app you're building: javascript
What javascript framework you're using: ionic
Source Directory Path: src
Distribution Directory Path: www
Build Command: npm run-script build
Do you want to use an AWS profile? Y
Please choose the profile you want to use: select your personal IAM profile