Now, let’s configure the package.json file so that we can point our GitHub repository to the location where our React app will be deployed. Install gh-pages as a dev dependency via npm: npm install gh-pages -save-dev The package allows us to publish build files into a gh-pages branch on GitHub, where they can then be hosted. Next, we’ll install the gh-pages package in our project. To do this, simply copy and paste the code received when you created a new repository (see the above repo screenshot).Īdding the GitHub Pages dependency package Now, we’ll commit our code and push it to our branch on GitHub. Initialize Git with the following command: git init Now that the GitHub remote repository is set up, the next step is to initialize Git in the project so that we can track changes and keep our local development environment in sync with the remote repository. Pushing the React app to the GitHub repository In your GitHub account, click the + icon in the top right and follow the prompts to set up a new repository.Īfter your repository has been successfully created, you should see a page that looks like this:Īwesome! Let’s proceed to the next step. The next step is to create a GitHub repository to store our project’s files and revisions. This tutorial is limited to demonstrating how to deploy a React application to GitHub Pages, so we’ll leave the current setup as it is without making any additional changes. Now, let’s navigate into the newly created React app project directory, like so: cd "your-project-name" In just a few minutes, create-react-app will have finished setting up a new React application! For this tutorial, we’ll set up the project in the desktop directory, like so: cd desktopĬreate a React application using create-react-app: npx create-react-app "your-project-name" Open the terminal on your computer and navigate to your preferred directory. For this tutorial, we’ll be using create-react-app but you can set up the project however you prefer. Let’s get started by creating a new React application. Push your React app to your GitHub repository.Create a GitHub repository for your project. To deploy your React application to GitHub Pages, follow these steps: How to deploy a React application to GitHub Pages A React app can be hosted on GitHub Pages in a similar manner. The website can be hosted on GitHub’s github.io domain (e.g., ) or on your own custom domain. GitHub Pages is a service from GitHub that enables you to add HTML, JavaScript, and CSS files to a repository and create a hosted static website. Node.js installed, or you can install it here.How to deploy a React app with routing to GitHub Pages.Committing changes and pushing code updates.Pushing the React app to the GitHub repository.React app deployment demo with GitHub Pages.We’ll also demonstrate how to create a custom domain on GitHub Pages for our static website. In this article, we’ll explore how to deploy React apps on GitHub Pages. With just a few steps, it’s easy to host a React app on GitHub Pages for free or build it to deploy on your own custom domain or subdomain. The simplicity of deploying a static website with GitHub Pages is a process that can be easily transferred to React applications. When he's not meddling with CSS, he spends his time writing, sharing what he knows, and playing games. Nelson Michael Follow Nelson Michael is a frontend developer from Nigeria.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |