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.
Related
I was working on my portfolio and I build it using react and I thought to deploy this using GitHub pages.
So, I started deploying and I've followed pretty much every step given there 'Create React App / Deployment', but I was not able to see the desired result.
You can Check here at thisisnitish.github.io: It deploys the README and I tried everything to fix it but it shows the same result.
You can visit the repository at github.com/thisisnitish/thisisnitish.github.io.
Any help would be appreciated 😊.
Since https://hisisnitish.github.io returns 404, it means nothing has been published by GitHub.
That would be because of the configuring a publishing source for your GitHub Pages site.
Make sure to select the branch main, folder public in order to instruct GitHub to publish your page from those elements.
The OP adds:
there is only a root and docs folder like this
Then you might try, for testing, to generate your site in the docs/ folder, instead of public/.
Or to generate it in a separate branch.
On your package.json, change the deploy script
"scripts": {
... (other scripts)
"deploy": "gh-pages -b main -d build"
}
Moreover, do not push your entire repository on github pages. Only content of /build folder is important here.
Alternatively, you can build your react app locally
npm run build
Then upload/copy contents of /build (index.html etc.) to your repository.
When I deploy my React App to Github Pages with 'npm run deploy' I am consistently running into a 404 'File not found'. The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.
One concern I have here, is finding that other operational Github Pages repositories only contain the build folder in their 'gh-pages' branch, not the rest of their source code. A second point of confusion, is that on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.
So, my questions are:
Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?
Can you describe a process to update the site once it's up?
If you want to check out my repository, you can find it at:
https://github.com/edmundweir/doe-website
And the site I am trying to get live is:
https://descendantsofearth.com/
Any help on the matter would be immensely appreciated as I am 500 metres down a troubleshooting rabbit hole and my flashlight has run out of batteries.
With thanks,
Betty.
TLDR: Delete the gh-pages branch on GitHub and then run npm run deploy.
404 'File not found'
This is happening because your gh-pages branch does not have an index.html file at the root and you didn't specify a source folder to use in the GitHub Pages settings. A quick remedy here would be to set the source folder to be /build, but that won't achieve the setup you're looking for with the gh-pages npm pkg.
The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.
This is the root cause of your issue. Your deploy npm script is currently set to commit the contents of the build folder only to the gh-pages branch. The package will manage this branch for you as a branch with a completely separate history from master.
on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.
Possibly it worked when you ran your deploy script and then you later broke it by manually pushing to the branch?
Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?
The package is handling all of this for you, which is really cool. For some history - when GitHub Pages first came out - the instructions were to create an orphan branch where you would push your static build to, manually. Note that there are a few ways to achieve this though.
Can you describe a process to update the site once it's up?
master should not contain your static build, just like it doesn't contain node_modules etc. You should add build to your .gitignore so that it doesn't get committed. That way you're only committing the actual source code - which minimizes the size of your code base and gives you a clean revision history.
Whenever you want to "deploy" your changes, you should run npm run build to build your static app from your source code and then npm run deploy to have gh-pages push your static build to the gh-pages branch (which GitHub Pages will then use for your site).
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
Hello I have read many docs online on connecting gh-pages with create-react-app. But most guides either assume that one does not already have a github pages set up, and that the react app is to be hosted as a directory (ie. username.github.io/react-app) instead of the homepage/root (username.github.io). I am hoping someone can help me out:
I have an existing repo for a github pages custom domain. It is currently hosting an older site I built with gulp and static html/css/js, and a CNAME file for custom url.
I built a new website redesign with create-react-app in a separate repo (It uses react-router for multiple pages).
I want to overwrite the contents of my old github pages site with my new create-react-app website as the root homepage.
Is this possible? If so, what is the best way to achieve this? Thanks
In the existing Github Pages app, remove the CNAME and/or delete master branch. Deleting master branch will remove the site, while deleting CNAME will clear up the custom domain back to default [username].github.io.
In create-react-app, add CNAME to /public folder.
In create-react-app, add line "homepage":"./" to package.json.
In create-react-app, run npm run build then run gh-pages -d build build process, then run npm run deploy
I have been trying out Codeship and Heroku for continuous deployment of an AngularJS application I writing at the moment. The app was created using Yeoman and uses bower and grunt. Initially I thought this seemed like a really good setup as Codeship was free to use and I was quickly able to configure this to build my AngularJS project and it offered the ability to add a deployment step after the build. There were even many PaaS providers to choose from (Heroku, S3, Google App Engine etc). However I seem to have become a bit stuck with getting the app to run on Heroku.
The problem started from the fact that all the documentation suggested that I remove the /dist path from my .gitignore so that this directory is published to Heroku post build. This was mainly from documentation that talked about publishing to Heroku from a local machine, but I figure this is all Codeship is doing under the hood anyway. I didn't want to do this as I don't believe I should be checking build output into source control. The /dist folder was added to .gitignore for a good reason. Furthermore, this kind of defeats the point of having a CI server somewhat, as I might as well just push the latest build from my machine.
After some more digging around I found out that I could add a postinstall step to my packages.json file such as bower install && grunt build which would re-run the build on Heroku and hence repopulate all the bower dependencies (something else they wanted me to check in to source control!) and the dist directory.
After giving this a try it became apparent that I would need to add bower and grunt as dependencies in packages.json, which meant moving them from devDependencies which is where they should belong!
So I now seem to be stuck. All I want to do is publish my build artefacts (/dist) the dependencies (/bower_components) and the server.js file that will run the site. Does anyone know how to achieve this with Heroku and Codeship? Alternatively has anyone had any success with this using different tools. I am looking for something that is free and I am willing to accept that it will not be production stable (won't scale to multiple servers etc), but this is fine for now as all I want to do is continuously deploy the app for internal testing and to be able to share the output with non-technical members of my team so we can discuss features we'd like to prioritise etc.
Any advice would be greatly appreciated.
Thanks
Ahoy, Marko from the Codeship crew here. Did you already send us an in app message about this? I'm sure we can get your application building on Codeship and deploying to Heroku successfully.
As a very short answer, the easiest way to get this running would be to add both bower and grunt to your dependencies in the package.json. Another possibility would be to look for a custom buildpack with both tools already installed.
And finally you could also run the tools on Codeship, add the newly installed files to the repository, commit the changes and push this new commit to Heroku. If you want to use this, you'd very probably need to force push the changes though.
Feel free to reach out to me via the in app messenger (lower right corner of the site) and I'd be happy to help you get this working!
I found two ways to get this to work.
Heroku Node Custom Buildpack
Use the mbuchetics Heroku build pack. This works by basically re-building the app once it has been pushed to Heroku.
There were a few tricks I had to employ still to make this work. In Gruntfile.jstwo new tasks needed to be configured called heroku:production and heroku:development. This is what the buildpack executes to build the app. I initially just aliased the main build task, but found that the either the buildpack or Heroku had a problem with running jshint so in the end I copied the build task and took out the parts that I didn't need.
Also in packages.json I had to add this:
"scripts": {
"postinstall": "bower cache clean && bower install"
}
This made sure the bower_components were available in Heroku.
Pros
This allowed me to keep the .gitignore file in tact so that the 'binaries' in the dist directory and the dependencies in the bower_components directory were not committed into source control.
Cons
This is basically re-building the app once it is on Heroku and I generally prefer to use the same 'binaries' throughout the entire build and deployment pipeline. That way I know that the same code that was built, is the same code that was tested and is the same code that was deployed.
It also slows down the deployment as you have to wait for the app to build twice.
CodeShip Custom Script Deployment
Not being satisfied with the fact I was building my app twice, I tried using a Custom Script pipeline in CodeShip instead of the pre-existing Heroku one. The script basically modified the .gitignore file to allow the dist folder to be committed and then pushed to the Heroku remote (which leaves the code on the origin remote unaffected by the change).
I ended up with the following bash script:
#!/bin/bash
gitRemoteName="heroku_$APP_NAME"
gitRemoteUrl="git#heroku.com:$APP_NAME.git"
# Configure git remote
git config --global user.email "you-email#example.com"
git config --global user.name "Build"
git remote add $gitRemoteName $gitRemoteUrl
# Allow dist to be pushed to heroku remote repo
echo '!dist' >> .gitignore
# Also make sure any other exclusions dont apply to that directory
echo '!dist/*' >> .gitignore
# Commit build output
git add -A .
herokuCommitMessage="Build $CI_BUILD_NUMBER for branch $CI_BRANCH. Commited by $CI_COMMITTER_NAME. Commit hash $CI_COMMIT_ID"
echo $herokuCommitMessage
git commit -m "$herokuCommitMessage"
# Must merge the last build in Heroku remote, but always chose new files in merge
git fetch $gitRemoteName
git merge "$gitRemoteName/master" -X ours -m "Merge last build and overwrite with new build"
# Branch is in detached mode so must reference the commit hash to push
git push $gitRemoteName $(git rev-parse HEAD):refs/heads/master
Pros
This only require a single build of the app and deploys the same binaries that were tested during the test phase.
Cons
I've used this script quite a few times now and it seems relatively stable. However one issue I know of is that when a new pipeline is created there will be no code on the master branch so this script fails when it tries to do the merge from the heroku remote. At the moment I get around this by doing an initial push of the master branch to Heroku before kicking off a build, but I imagine there is probably a better Git command I could run along the lines of; 'only merge this branch if it already exists'.