![]() The master branch will contain the React app's source code, while the gh-pages branch will contain the distributable version of the React app. It will have two branches: master and gh-pages. I recommend exploring the GitHub repository at this point. $ git commit -m "Configure React app for deployment to GitHub Pages " In this step, I'll show you how you can store the source code of the React app on GitHub.Ĭommit the changes you made while you were following this tutorial, to the master branch of the local Git repository then, push that branch up to the master branch of the GitHub repository. However, the source code of the React app is not yet stored on GitHub. In a previous step, the gh-pages npm package pushed the distributable version of the React app to a branch named gh-pages in the GitHub repository. (Optional) Store the React app's source code on GitHub For example, the React app I deployed is accessible at. That's it! The React app has been deployed to GitHub Pages! □Īt this point, the React app is accessible to anyone who visits the homepage URL you specified in Step 4. Configure the "Build and deployment" settings like this:.In the sidebar, in the "Code and automation" section, click on "Pages".Above the code browser, click on the tab labeled "Settings".In your web browser, navigate to the GitHub repository.Navigate to the GitHub Pages settings page.However, we haven't configured GitHub Pages to serve those files yet. $ npm run deploy -m "Deploy React app to GitHub Pages "Īt this point, the GitHub repository contains a branch named gh-pages, which contains the files that make up the distributable version of the React app. ![]() In case the branch in your repository has a different name (which you can check by running $ git branch), such as main you can replace all occurrences of master throughout the remainder of this tutorial, with that other name (e.g. Since I have not set that variable in my Git installation, the branch in my repository will be named master. ![]() via $ git config -global faultBranch main). ![]() The Git repository will have one branch, which will be named either (a) master, the default for a fresh Git installation or (b) the value of the Git configuration variable, faultBranch, if your computer is running Git version 2.28 or later and you have set that variable in your Git configuration (e.g. That characteristic of the folder will come into play in Step 6. In addition to containing the source code of the React app, that folder is also a Git repository. That command will create a new folder named my-app, which will contain the source code of a React app. $ npx create-react-app my-app -template typescript web-ui), you can accomplish that by replacing all occurrences of my-app in this tutorial, with that other name (i.e. In case you want to use a different name from my-app (e.g. gitignore, and/or LICENSE file.Īt this point, your GitHub account contains an empty repository, having the name and privacy type that you specified. That will make it so GitHub creates an empty repository, instead of pre-populating the repository with a README.md. Initialize repository: Leave all checkboxes empty. For GitHub Pro users (and other paying users), both Public and Private repositories can be used with GitHub Pages. * For GitHub Free users, the only type of repository that can be used with GitHub Pages is Public. Repository privacy: Select Public (or Private*). In this tutorial, I'll be deploying the React app as a project site. The name you enter will show up in a few places: (a) in references to the repository throughout GitHub, (b) in the URL of the repository, and (c) in the URL of the deployed React app. For a user site, GitHub requires that the repository's name have the following format. * For a project site, you can enter any name you want. Repository name: You can enter any name you want*.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |