deploy react app on github gh-pages - github

when I'm trying to deploy react app on gh-pages it gives me this error

I could not deploy my react app on gh-pages github because I was using windows. on Ubuntu works fine.

Another alternative (whilst not as nice as being able to run npm run deploy is to manually add the build folder to a git repository and then set up GitHub pages via the website in Settings -> GitHub Pages

Related

How to publish a Ionic 5 website on GitHub pages?

I already had published some website on GitHub pages with no issue. My common workflow is to build a website, upload in the root (/) or docs (/docs) directory of my repository and set up GitHub Pages in the settings.
This is my first time using Ionic. I wrote a website and I build it by running ionic build --prod.
Than I uploaded my contents to the /docs directory of the repo.
When I visit the website https://<nickname>.github.io/<myrepo>/ it leaves me in a blank page. Inspecting with Google Chrome dev tools, I can see that scripts are referred to https://<nickname>.github.io/script.js instead of https://<nickname>.github.io/<myrepo>/script.js
How can I make it work? What I am doing wrong?
You can find the full source code of my project here. You can build it by yourself and try if there is something wrong. The site is functional when I execute it on my local web server for testing.
How to make any React website work with GitHub Pages
Prerequisites
npm installed
directory containing the React project
git repository set on this directory and linked to the remote on GitHub
Steps to follow
Run npm install gh-pages --save-dev
Edit the package.json file:
Add this line: "homepage": "http://githubname.github.io/repository". Use your nickname and repository name
Add these lines in the scripts section:
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Push a commit
git add .
git commit -m "Create a React app and publish it to GitHub Pages"
git push origin master
Your website is available at http://githubname.github.io/repository
For more info see this page
Additional steps for Ionic 5
If you are using Ionic 5, some errors can still occur.
In this case, visit the website on http://githubname.github.io/repository and open the Chrome Inspector Tools (CTRL + SHIFT + I).
Look at the Console: some JS or TS script could be not loaded. You can see that the browser is looking at the scripts in a wrong path.
By manually editing the index.html you can point the script to the right URLs.
Upload the edited index.html in the gh-pages branch of your GitHub repo and you are good to go.

Why can't I host my project on github pages?

I have a simple weather app using react I've built and pushed to Github. Everything works when I run it locally but when I try to host it on Github pages, I get a 404 error.
https://caseycling.github.io/weather-app/
I'm not sure what I did wrong as I took the same steps as with every other project I've succesfully deployed: went to settings and under Github pages, I chose master branch as the source. Initially, it was just displaying the readme but now it only displays a 404 error message. When I've googled this issue, some people are saying I need to move my folders to the root of the directory but I'm not sure how to do that exactly.
Here is the repo:
https://github.com/caseycling/weather-app/
My understanding is that in order to run a react app in github pages you need to setup the gh-pages plugin and have a special 'deploy' build script in package.json
https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
https://codeburst.io/deploy-react-to-github-pages-to-create-an-amazing-website-42d8b09cd4d
https://medium.com/the-andela-way/how-to-deploy-your-react-application-to-github-pages-in-less-than-5-minutes-8c5f665a2d2a
There are also apparently certain restrictions in what you can do with the router in github pages websites, but for a simple app it should be sufficient.

How to deploy a Javascript application on gitHub?

I have a application built using HTML5,CSS3,Bootstrap,Javascript and Jquery.I want to deploy the application on github .
Any suggestions on how to achieve it ?
I'd suggest you to read some guides firstly. Like this one:
https://guides.github.com/activities/hello-world/
You have to install git on your local PC, then create your own repository on git and clone it to your computer. After that, you will be able to store your JS project in that repository and simply commit, push and pull all tha changes you did.
Have fun!

how to serve my own gitbook using github pages

I've created my own gitbook. looks good locally.
but how shall I integrate it into my github pages? Similar issues here difficulty-in-getting-gitbook-site-to-show-up-in-github-page
I tried that approach as well, but I have problem setting the grunt up, and I also I would like to do that myself before using an integrated tool.
I tried to copy the generated _book folder to my github page folder, but that didn't workout as there are some encoding issues
Similar question here
I had this question because I don't understand github pages, the underlying steps involve
build the _book folder, this is the static content that will be served
create gh-pages branch copy the _book folder content into gh-pages
github will then serve the content
the command gitbook publish will finish all 3 steps. but I am not familiar with grunt as well , as npm install . is a pre-step.

Pushing to bitbucket and deploying to heroku

I have Play! application in Bitbucket. I have my local repo linked to both Bitbucket and Heroku and everything works fine (whenever I push to heroku master, the application re-builds and I can see the changes online). Now, I want only to push to bitbucket and deploy to Heroku, i.e. I want to push to Bitbucket, and my Heroku app to pick the changes from Bitbucket and rebuilds the app. The reason I want this is because Bitbucket now offers online code editing and I do not always have Git or Heroku Toolbelt installed in the systems I work. It will also be nice to manage a single repo.
I know that Heroku maintains it's own git system and from Heroku's Settings tab, I can see following info -
Region: United States
Stack: Cedar
Framework: Play 2.x - Scala
Git URL: git#heroku.com:xyz-abc.git
Repo size: 139 MB
Slug size: 117 MB of 200 MB
Also, I have changed the GitHub Repo settings in Heroku to git#bitbucket.org:user-xyz/xyz-abc.git. I have found this and this SO issues and this Heroku documentation related to my requirement, but couldn't make it work. Is it even possible?
You could have used Bitbucket Services; unfortunately, there is none for Github. Maybe you could try to build one and submit to Bitbucket.
The Github Repo setting in Heroku simply displays the commit diffs in the activity log - there's a note to that effect just in the Github repo text
Link your app to a GitHub repository to see commit diffs in the activity log.
It doesn't provide any other functionality at present.
I'm not familiar with Play myself, but with Rails and the add Codeship.io (and others I imagine) you can do continuous deployment where you push to github/bitbucket and that then uses a webhook to trigger codeship to pick up your code, test it and then deploy it to Heroku. I'm sure there are Play hosted testing services out there which may help.