Ok so I've never actually deployed an app before. I used the create-react-app to create the app, when ready I used npm run build this gives me a build folder but when I try to push the code to my github repo it says everything is up-to-date.
Should I be just concerned with the the build folder now? I tried creating a repo for my build folder and deploying it to Heroku but that didn't work.
I'm not sure how to get my code up to github and then to Heroku if it's saying everything is up to date. Just looking for some feedback here. Haven't really deployed anything before.
Thanks!
You can add the create-react-app-buildpack
Set the buildpack with
heroku buildpacks:set https://github.com/mars/create-react-app-buildpack
Then just push to heroku and you're good to go!
git push heroku master
You need to create an another repo with heroku using their cli and run these commands:
heroku login
heroku create
Then copy the second link which is your heroku git repo and push your code using:
git push heroku master
Related
I'm trying to deploy using Heroku.
When pushing my code to Heroku git through its HTTPS URL, I see an error like this
git push heroku main fatal: unable to access 'https://projectname.herokuapp.com/': The requested URL returned
error: 502
I already removed Heroku and added a new Heroku but it still didn't work. Can anyone help me?
done✔✔✔
You're trying to use the address where your app is hosted as a Git remote:
https://mfal-project.herokuapp.com/
But the address where your app is hosted and the address its Git service uses are different.
Instead of adding the remote manually, I suggest you remove the existing one using git remote rm heroku and then ask the Heroku CLI to add a remote for you:
heroku git:remote -a mfal-project
You should now see a new remote called heroku that looks more like
https://git.heroku.com/mfal-project.git
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
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...
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 am trying to deploy a react app at username.gihub.io
There are 2 main issues
Whenever I try to build an application in react with gh-pages and
deploy it goes to the branch gh-pages.
Gihub always serves from the branch master, if the repo name is
username.github.io (cannot be changed )
Has anyone deployed a react app in this url. If so, tell me how did you do it?
(Other than drag and drop build folder to master )
Image :
Easiest way to deploy using GitHub now is by the new deploy from docs folder found here at the end of the page.
You should be able to tweak your app to run build into the docs folder, way less headache than trying to get regular github-pages working imo.
For fast sanity checking you can also drag your app into /docs
First make a develop branch, pull all code from master, then empty the master branch project. Work on the develop branch with the install dependencies, test with local then run:
npm run build
npm run deploy
After development is complete, checkout to master branch and run:
pull origin gh-pages branch
git add .
git commit -m "your massage"
git push origin master
Now you can check your username.github.io.
I was having the same doubt, I'm following the steps from https://www.taniarascia.com/getting-started-with-react/
to build and deploy, so I just went to my repo > settings > GH Pages > Serve from gh-pages branch and it worked without further config.