![]() You should see a link to the deployed React application. To view our deployed React application, navigate to the Settings tab and click on the Pages menu. This will create a bundled version of our React application and push it to a gh-pages branch in our remote repository on GitHub. We can deploy our React application by simply running: npm run deploy. Now, let’s commit our changes and push the code to our remote repository, like so: git add. Committing changes and pushing code updates to the GitHub repo That’s it! We‘ve finished configuring the package.json file. In the package.json file, scroll down to the scripts property and add the following commands: "predeploy" : "npm run build", In the package.json file, add a homepage property that follows this structure: Now, let’s add the scripts. The predeploy script is used to bundle the React application the deploy script deploys the bundled file. We’ll also need to add predeploy and deploy scripts to the package.json file. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |