How to deploy angular 2 website application on github? I am new to Git and github so just saw the basics on internet and created a repository on github and finally a url was generated in my git bash after running all steps and when I tried to open it Github 404 error pages was showing.
These are the commands which I ran through :
git remote add origin https://github.com/Muraliduke/MuraliDukeResume.git
git push -u origin master
ng github-pages:deploy
Is there any difficulty for single page application to host a website on github? I tried with normal html content and my website on github works fine. But this with ng2 is not working. Just saw on internet that there must be some prefix to be done to support SPA on github but since I am not familiar with github didn't understand it. So kindly suggest me a solution ?
There are a few things :
Deploying to GitHub pages using Angular CLI has been deprecated. Use angular-cli-ghpages
Add the 404.html fix
Ensure you have "turned on" GitHub pages for your gh-pages branch from the repository settings
optionally, add custom domain
This blog has everything you need.
Make sure to do a build to get the necessary files into dist .
ng build --prod
First get all relevant the files from the Dist Folder of your application
for me it was the css files in the assets folder main.bundle.js polyfills.bundle.js vendor.bundle.js
Then push this files in the repo which you have created.
1 -- If you want the application to run on the root directory - create a special repo with the name [yourgithubusername].github.io and opush these files in the master branch
2 -- Where as if you want to create these page in the sub directory of in a different brach other than than the root , create a branch gh-pages and push these files in that branch.
In both the cases the way we access these deployed pages will be different .
For the First Case it will be https://[yourgithubusername].github.io and for the second case it will be [yourgithubusername].github.io/[Repo name].
If Suppose you want to deploy it using the second case make sure to change the base url pf the index.html file in the dist as all the route mappings depend on the path you give and it should be set to [/branchname].
Github Repository - https://github.com/rahulrsingh09/Deployment
Related
When i try to deploy my react app to github pages with the package gh-pages, the result page is blank.result page
The page I am trying to deploy is here: LINK
I don't know if it matters but I am currently using the free domain given to me by GitHub: www.elvas.me
I tried following the react official docs: Link, but it didn't work for me... Perhaps it's because I am using vite and not create-react-app?
*Edit*
Found out that the site is trying to get the .js and the .css from the wrong place.
I just don't know what I am doing wrong...
Ok, so to solve this the only thing that I had to do was to add base:"{repName}" to the vite.config.ts file.
Source: https://vitejs.dev/guide/static-deploy.html
The images were not loading, I used this to fix them:
Github pages vite JS build not showing the images
I see that you have managed to deploy your React project to Github pages successfully, but here is how I did it in case anyone needs help:
First things first, make sure that your ".git" folder and your project are in the same folder.
Run npm run build. You should have a dist folder now.
Open the file vite.config.js (or .ts).
Add the base file with your repository name. Include the two /.
Example: let's say your github project's URL is https://github.com/atlassian/react-beautiful-dnd.
export default defineConfig({
base: "/react-beautiful-dnd/",
plugins: [react()],
});
Open your .gitignore file and delete the dist line from it. You want to make sure that the dist folder is pushed to github.
git add .
git commit -m "deploy"
git subtree push --prefix dist origin gh-pages
Wait for a couple minutes (in my case it took 4 minutes) and open the page. In the example above, the URL would look like this: https://atlassian.github.io/react-beautiful-dnd
In case it's still showing a blank page, it's very likely to do with the step number 3. Ensure you added the correct repository URL and that it begins and ends with the / sign.
That is about it, I hope it helps. I used this blog post for guidance, it is a more detailed explanation of the above.
I know two ways of hosting an app.
You either go to settings and set source branch and select folder.
You can follow some steps like npm --save install gh-pages, npm run deploy and so on.
I tried to host my app the 1st way, but it shows README file and it doesn't show index.html in public folder.
The "Configuring a publishing source for your GitHub Pages site" does mention choosing a branch and folder.
But:
gh-pages is always a branch, not a folder.
the folder referenced in the documentation seems only to be /docs: try for testing your index.html in docs/ rather than public/.
That being said, try and test the new (Dec. 2021) feature:
GitHub Pages: using GitHub Actions for builds and deployments for public repositories
Today you will begin to see a new workflow running called pages build and deployment in your public GitHub Pages repositories.
This workflow is automatically triggered when you push to the branch configured for GitHub Pages in your repository.
As the name suggests, it builds and deploys your pages site.
The initial benefit of this change is enabling you to see your build logs and any errors that may occur which has been a long standing issue for Pages users.
However, in the future this will enable us to give you the ability to fully customize your pages build and deployment workflow to use any static site generator you want without having to push the build output to a special branch of the repository.
You may notice this workflow uses some new actions actions/pages-deploy, and actions/jekyll-build-pages.
For now these actions are designed to be used in the generated workflow, however, starting early next year we will introduce some additional changes that will enable you to take advantage of them.
Learn more about GitHub Pages
After taking a look at console, i got this
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/2.1f6fc1d5.chunk.js”.
Loading failed for the <script> with source “https://abhishek-098.github.io/TourSpot%20/static/js/main.3961266e.chunk.js”.
Link to my Repo : https://github.com/Abhishek-098/TourSpot
For deploying a Single-Page Application (React, Vue) to GitHub Pages, you should know that it is necessary that you do a production build. This can be accomplished by doing npm run build or yarn build depending on the package manager you are using. This command will generate a ./dist or ./build folder that will contain your react app in pure HTML, CSS, and JS.
For GitHub pages, there are some configurations you should do. First of all, the index.html from your production build (from the dist, build folder) should be in the root folder, which means, you should be able to see it when you open the repo (not inside the build folder). If GitHub pages do not detect any index.html in the root of the repo, it will display a 404 page.
Now, since you do not want the production build files messing around with your React project, it is recommended that you create a different branch for your GitHub pages deploy.
So, ideally, you would have two branches: master and gh-pages, the first one containing your React project and the second one containing only your dist folder but in the root of the project.
Here is an example of the structure of a Repo that it's deployed using GitHub pages.
https://github.com/8rb/React-Quiz/tree/master
You can see both branches and the deployment link works perfectly fine.
To configure the branch that is being deployed to GitHub pages, go to settings and select the branch where you have your production build.
All the information was taken for the following link:
https://create-react-app.dev/docs/deployment/#github-pages
I hope you found it useful!
#Rodrigo Ramirez does explain how its done, but leaves out some important information provided in the docs he linked (https://create-react-app.dev/docs/deployment/#github-pages). Maybe the've been updated since but I would recommend following those steps in the doc. They give step by step instructions that are very easy to follow.
I tried following #Rodrigo Ramirez answer, as well as, countless other things on the internet and nothing worked and it was all very complicated. The doc provided here gets it all done for you very easily.
For the main git repository, devanshdalal.github.io, I am unable to choose the src branch to use for deploying, github.com always picks up the master branch. It becomes difficult now, because I now have to push my build/ forlder to master. Is there a way to automate this?
Currently github doesn't support choosing custom folder for repo named like {GITUSER}.github.io -
From community help post
From https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/, the only three options that GitHub Pages recognizes are:
master branch
docs/ folder on the master branch
gh-pages branch
But for repo like {GITUSER}.github.io, having docs/ folder also doesn't work(I couldn't make it work). I faced this similar issue a while back. I was using jekyll to build the static pages for my site. I know It's really frustrating, but as of now what you want, is not possible.
However, I made a workaround to version-control my jekyll project as well the generated static github.io pages.
I maintain a separate repo for the jekyll version of the project(which in your case I guess would be the react project). So locally I have two separate repo -
{my_username}.github.io - > which will contain the static pages, and remote for this local repo would be the {my_username}.gihub.io repo(the static site repo).
I also have a separate repo for the jekyll project. Which has a different remote repo setup. I configured settings for this project in such way that after build, the static pages will be saved in the local repo of {my_username}.github.io folder. then I can just commit and push separately in the two repos.
This way I can keep track of the static pages as well as the jekyll project that builds the static pages.
You only need to make sure that before you configure a publishing source, the branch or folder you want to use as your publishing source already exists in your repository.
This link GithubPages will solve your problem.
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