{"id":32,"date":"2024-11-22T21:00:00","date_gmt":"2024-11-22T21:00:00","guid":{"rendered":"https:\/\/blog.chessboardmagic.com\/?p=32"},"modified":"2025-09-28T21:33:59","modified_gmt":"2025-09-28T21:33:59","slug":"chess-web-programming-part-three-deploying-your-application","status":"publish","type":"post","link":"https:\/\/blog.chessboardmagic.com\/index.php\/2024\/11\/22\/chess-web-programming-part-three-deploying-your-application\/","title":{"rendered":"Chess Web Programming: Part Three: Deploying your Application"},"content":{"rendered":"\n<p><strong>Deploying you Application<\/strong><\/p>\n\n\n\n<p>In October 2023, I began learning modern web programming and used&nbsp;<strong><a href=\"https:\/\/chessboardmagic.com\/\">Chessboard Magic<\/a><\/strong>&nbsp;as my first major project. What started as a way to practice my skills has grown into something much larger\u2014Chessboard Magic now includes 34 different chess-based applications! Building it was both a rewarding challenge and a fantastic way to dive deeper into web development, and now I\u2019m excited to share this journey with you.<br>Throughout this series, I&#8217;ve shared insights and practical steps for building chess applications. In&nbsp;<strong><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-one-getting-started\/8ZKpwJU8\">Part One<\/a><\/strong>, we covered the fundamentals: setting up a functional chessboard with&nbsp;<strong>react-chessboard<\/strong>&nbsp;and using&nbsp;<strong>chess.js<\/strong>&nbsp;for move validation. This laid the foundation for the interactive experience that makes Chessboard Magic engaging. Then in&nbsp;<strong><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-two-stockfish\/PdeOTODf\">Part Two<\/a><\/strong>, we took things further by integrating&nbsp;<strong>Stockfish<\/strong>, a powerful open-source chess engine, to provide the best move in any position. This feature adds a robust layer of analysis and brings the game to life with real-time insights.<br>Now, in&nbsp;<strong>Part Three<\/strong>, it&#8217;s time to share our work with the world. In this article, I\u2019ll guide you through the deployment process, focusing on free options for getting your application live, like GitHub Pages. By the end of this guide, you\u2019ll be ready to publish your application, making it accessible to others who want to explore, analyze, and enjoy chess through your project.<br>Let\u2019s dive into making your application live!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note<\/strong>: If you are new to programming, I would highly recommend taking a little time to look into Git. It\u2019s a fundamental tool for version control, collaboration, and managing code, and is essential for deploying projects like this one.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#sign-up-for-github\"><\/a>Sign Up for GitHub<\/h2>\n\n\n\n<p><strong>What is GitHub?<\/strong><br>GitHub is a platform designed for storing and managing code, built on top of Git\u2014a popular version control system. It allows you to track every change you make to your code, so you can go back to previous versions if something breaks or if you want to revisit an earlier version of your project. Think of GitHub as both a safe place to store your code online and a powerful tool for collaborating with others on projects.<br>Here\u2019s why GitHub is widely used and especially helpful for web developers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Version Control<\/strong>: GitHub records every change you make to your code, making it easy to track, manage, and even revert changes. This feature is invaluable when working on complex projects, as it allows you to try new things without the fear of losing past work.<\/li>\n\n\n\n<li><strong>Collaboration<\/strong>: GitHub makes it easy to work with others by allowing multiple people to contribute to a single project. Each person\u2019s contributions are saved separately, and GitHub offers tools to combine and manage everyone\u2019s changes.<\/li>\n\n\n\n<li><strong>Free Hosting with GitHub Pages<\/strong>: GitHub offers a service called\u00a0<strong>GitHub Pages<\/strong>, which lets you publish your code as a live website. This means that, with a few steps, you can deploy and share your web application with anyone online\u2014for free.<\/li>\n<\/ul>\n\n\n\n<p>In this guide, we\u2019ll use GitHub as a central place to store your project and then deploy it live using GitHub Pages. Here\u2019s how to get started:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Go to\u00a0<a href=\"https:\/\/github.com\/\">GitHub<\/a><\/strong>: Open GitHub in your browser.<\/li>\n\n\n\n<li><strong>Click &#8220;Sign up&#8221;<\/strong>: Follow the prompts to create an account. You\u2019ll need to enter a username, email, and password.<\/li>\n\n\n\n<li><strong>Verify Your Email<\/strong>: GitHub will send a verification email. Click the link in the email to activate your account.<\/li>\n<\/ol>\n\n\n\n<p>Once your account is set up, you\u2019ll have access to all of GitHub\u2019s free tools, including GitHub Pages! In the next steps, we\u2019ll guide you through creating a GitHub repository (project folder) and uploading your project to GitHub.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#install-git\"><\/a>Install Git<\/h2>\n\n\n\n<p><strong>What is Git?<\/strong><br>Git is a tool that helps you keep track of changes to your project. Imagine you\u2019re working on a project and want to save each step as you go so you can go back if needed. Git lets you do this by creating &#8220;snapshots&#8221; (called&nbsp;<strong>commits<\/strong>) of your project. Each commit saves the current state of your project, so you can rewind to any previous point if you need to.<br>Here\u2019s why Git is helpful:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Save Points<\/strong>: Git lets you save different versions of your project. If something goes wrong, you can easily go back to an earlier version.<\/li>\n\n\n\n<li><strong>Experimenting Safely<\/strong>: You can try new ideas without risking your main project. Git lets you create \u201cbranches,\u201d or test versions of your project, that you can later combine back into your main work if you like the changes.<\/li>\n\n\n\n<li><strong>Collaborating with Others<\/strong>: If you\u2019re working with a team, Git helps everyone stay organized by tracking who made which changes. This way, everyone\u2019s work can be combined smoothly.<\/li>\n<\/ul>\n\n\n\n<p><strong>Why Do You Need Git with Visual Studio Code?<\/strong><br>Visual Studio Code (VS Code) is designed to work well with Git, so you can save, track, and manage changes without ever leaving the editor. However, VS Code doesn\u2019t come with Git installed. To use Git\u2019s features in VS Code, you\u2019ll need to download and install Git first.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#how-to-install-git\"><\/a>How to Install Git<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Download Git<\/strong>: Go to\u00a0<strong><a href=\"https:\/\/git-scm.com\/downloads\">Git Downloads<\/a><\/strong>\u00a0and choose the right version for your computer.<\/li>\n\n\n\n<li><strong>Install Git<\/strong>: Open the downloaded file and follow the steps to install Git.<\/li>\n\n\n\n<li><strong>Check That Git Installed Correctly<\/strong>: Once Git is installed, open a terminal or Command Prompt on your computer. Type:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>git --version<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\">\n<li>If you see a version number, Git is ready to use!<\/li>\n<\/ol>\n\n\n\n<p>After you install Git, you\u2019ll be able to use VS Code\u2019s built-in Source Control panel to save, track, and upload your project changes with ease.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#create-a-new-github-repository\"><\/a>Create a New GitHub Repository<\/h2>\n\n\n\n<p>Now that you have Git installed, it\u2019s time to create a&nbsp;<strong>repository<\/strong>&nbsp;(often shortened to \u201crepo\u201d) on GitHub. Think of a repository as a special folder on GitHub that will hold your project files, allowing you to save, share, and manage your project online.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#what-is-a-github-repository\"><\/a>What is a GitHub Repository?<\/h3>\n\n\n\n<p>A GitHub repository is like a project folder that you store on GitHub. It contains your project files and tracks changes over time, so you can revisit past versions if needed. Repositories make it easy to share your work, collaborate with others, and keep everything organized in one place.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#how-to-create-your-repository\"><\/a>How to Create Your Repository<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Go to GitHub<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Open\u00a0<strong><a href=\"https:\/\/github.com\/\">GitHub<\/a><\/strong>\u00a0in your web browser and log in if you haven\u2019t already.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Create a New Repository<\/strong>:\n<ul class=\"wp-block-list\">\n<li>At the top-right corner of the GitHub homepage, click on the\u00a0<strong>+<\/strong>\u00a0icon and select\u00a0<strong>New repository<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Set Up Your Repository<\/strong>:\n<ul class=\"wp-block-list\">\n<li><strong>Repository Name<\/strong>: Enter a name for your repository, such as\u00a0<code>myfirstchessapp<\/code>. This name will also be part of your project\u2019s URL on GitHub.<\/li>\n\n\n\n<li><strong>Description (Optional)<\/strong>: You can add a short description to explain what your project is about (e.g., \u201cMy first chess app with web programming\u201d).<\/li>\n\n\n\n<li><strong>Public vs. Private<\/strong>: Select\u00a0<strong>Public<\/strong>\u00a0if you want anyone to see your project. GitHub Pages requires a public repository to publish your site for free.<\/li>\n\n\n\n<li><strong>README (Optional)<\/strong>: You can check the box to add a README file. A README file is like an introduction to your project and can include instructions or notes for users. We\u2019ll add one later, so it\u2019s okay to skip this for now.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Create the Repository<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Once you\u2019ve filled out these details, click\u00a0<strong>Create repository<\/strong>. GitHub will create a new, empty repository with the name you specified.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Get Your Repository\u2019s URL<\/strong>:\n<ul class=\"wp-block-list\">\n<li>After creating your repository, GitHub will display a URL that looks like\u00a0<code>https:\/\/github.com\/your-username\/myfirstchessapp.git<\/code>. Copy this URL\u2014you\u2019ll use it in the next step to link your project folder on your computer with this new GitHub repository.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>With your repository created, you\u2019re ready to move to the next step, where we\u2019ll link your local project to GitHub and upload your files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#initialize-git-commit-your-code-and-publish-the-branch\"><\/a>Initialize Git, Commit Your Code, and Publish the Branch<\/h2>\n\n\n\n<p>This step will help you set up Git in your project folder, make an initial commit, and push your code to GitHub. After this, you\u2019ll be able to manage everything directly from Visual Studio Code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#1-open-your-project-in-vs-code-and-open-the-terminal\"><\/a>1. Open Your Project in VS Code and Open the Terminal<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Open Visual Studio Code<\/strong>: Open VS Code and go to\u00a0<strong>File > Open Folder<\/strong>. Select the folder where your project is stored (e.g.,\u00a0<code>myfirstchessapp<\/code>).<\/li>\n\n\n\n<li><strong>Open the Terminal<\/strong>: In VS Code, open the\u00a0<strong>Terminal<\/strong>\u00a0by going to\u00a0<strong>View > Terminal<\/strong>\u00a0or pressing\u00a0<code>Ctrl +<\/code>(backtick). This will open a terminal at the root of your project, where you can enter Git commands.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#2-initialize-git-in-your-project\"><\/a>2. Initialize Git in Your Project<\/h3>\n\n\n\n<p>Initializing Git in your project folder is the first step to making Git aware of your files so it can track them. This process sets up Git to work in your project folder, creating a hidden&nbsp;<code>.git<\/code>&nbsp;folder where Git will store all the information it needs to track your changes.<br>Let\u2019s go through this step-by-step:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Open Your Project in Visual Studio Code<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Go to\u00a0<strong>File > Open Folder<\/strong>\u00a0and select your project folder (e.g.,\u00a0<code>myfirstchessapp<\/code>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Open the Terminal<\/strong>:\n<ul class=\"wp-block-list\">\n<li>In VS Code, go to\u00a0<strong>View > Terminal<\/strong>\u00a0to open a terminal at the bottom of the screen.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Initialize Git<\/strong>:\n<ul class=\"wp-block-list\">\n<li>In the terminal, type:\u00a0<code>git init<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>After this, Git is ready to track your files, and you can move on to the next step.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#3-stage-and-commit-your-files\"><\/a>3. Stage and Commit Your Files<\/h3>\n\n\n\n<p>Now that Git is set up in your project, we need to&nbsp;<strong>stage<\/strong>&nbsp;your files (prepare them to be saved) and then&nbsp;<strong>commit<\/strong>&nbsp;them (create a save point).<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Stage All Files<\/strong>:\n<ul class=\"wp-block-list\">\n<li>In the terminal, type:\u00a0<code>git add .<\/code><\/li>\n\n\n\n<li>Press\u00a0<strong>Enter<\/strong>. This command stages all files in your project, preparing them for the commit.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Create Your First Commit<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Now type:\u00a0<code>git commit -m \"Initial commit\"<\/code><\/li>\n\n\n\n<li>Press\u00a0<strong>Enter<\/strong>. This command saves the staged files with the message\u00a0<code>\"Initial commit\"<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>Your files are now committed, meaning Git has created a save point for this version of your project. You\u2019re ready to link your project to GitHub in the next step.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#4-link-your-project-to-github\"><\/a>4. Link Your Project to GitHub<\/h3>\n\n\n\n<p>To upload your project to GitHub, you need to connect your local project to the GitHub repository you created.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Copy the Repository URL<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Go to your GitHub repository page (e.g.,\u00a0<code>https:\/\/github.com\/your-username\/myfirstchessapp<\/code>).<\/li>\n\n\n\n<li>Click the green\u00a0<strong>Code<\/strong>\u00a0button, then copy the URL (it should look like\u00a0<code>https:\/\/github.com\/your-username\/myfirstchessapp.git<\/code>).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Add the Remote Repository<\/strong>:\n<ul class=\"wp-block-list\">\n<li>In the VS Code terminal, type:\u00a0<code>git remote add origin https:\/\/github.com\/your-username\/myfirstchessapp.git<\/code><\/li>\n\n\n\n<li>Replace\u00a0<code>your-username<\/code>\u00a0with your GitHub username.<\/li>\n\n\n\n<li>Press\u00a0<strong>Enter<\/strong>. This command links your local project to the GitHub repository.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>Now your local project is connected to GitHub, and you\u2019re ready to publish it. In the next step, we\u2019ll push your code to GitHub to make it accessible online.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#5-publish-your-code-to-github\"><\/a>5. Publish Your Code to GitHub<\/h3>\n\n\n\n<p>Now that your project is connected to GitHub, let\u2019s push your code online so it\u2019s saved in your GitHub repository.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Go to the Source Control Panel<\/strong>:\n<ul class=\"wp-block-list\">\n<li>In Visual Studio Code, click on the\u00a0<strong>Source Control<\/strong>\u00a0icon in the sidebar (it looks like a branch).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Click on Publish Branch<\/strong>:\n<ul class=\"wp-block-list\">\n<li>In the Source Control panel, you should see a\u00a0<strong>Publish Branch<\/strong>\u00a0button at the top. Click it.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Confirm the Branch Name<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Visual Studio Code will publish your current branch, usually named\u00a0<code>main<\/code>. If it asks for confirmation, make sure\u00a0<code>main<\/code>\u00a0is selected and confirm.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Sign In to GitHub (if prompted)<\/strong>:\n<ul class=\"wp-block-list\">\n<li>If you haven\u2019t connected VS Code to GitHub before, it may ask you to sign in. Follow the prompts to log in.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>Once the publish process is complete, Visual Studio Code will upload your project files to GitHub, and you\u2019ll see a confirmation message.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#deploy-your-project-using-npm-and-github-pages\"><\/a>Deploy Your Project Using npm and GitHub Pages<\/h2>\n\n\n\n<p>To automate the deployment of your project, we\u2019ll use the&nbsp;<code>gh-pages<\/code>&nbsp;package. This package allows you to publish your project to GitHub Pages directly from the command line, making it quick and easy.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#1-install-the-gh-pages-package\"><\/a><strong>1. Install the&nbsp;<code>gh-pages<\/code>&nbsp;Package<\/strong><\/h4>\n\n\n\n<p>In the terminal, run this command to install&nbsp;<code>gh-pages<\/code>&nbsp;as a development dependency:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install gh-pages --save-dev<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Explanation<\/strong>: This command installs&nbsp;<code>gh-pages<\/code>, which will handle the process of uploading your project to a special branch on GitHub called&nbsp;<code>gh-pages<\/code>. GitHub Pages uses this branch to host your site.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#2-add-a-homepage-field-in-packagejson\"><\/a><strong>2. Add a&nbsp;<code>homepage<\/code>&nbsp;Field in&nbsp;<code>package.json<\/code><\/strong><\/h4>\n\n\n\n<p>The&nbsp;<code>homepage<\/code>&nbsp;field in&nbsp;<code>package.json<\/code>&nbsp;tells GitHub Pages where your site will be hosted. Adding this field helps ensure that links and assets work correctly on your live site.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Open\u00a0<code>package.json<\/code><\/strong>:\n<ul class=\"wp-block-list\">\n<li>In Visual Studio Code, go to the file explorer on the left side and find the file called\u00a0<code>package.json<\/code>\u00a0in the root of your project. Click to open it.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Add the\u00a0<code>homepage<\/code>\u00a0Field<\/strong>:<ul><li>At the top of the file, add a new line directly after the opening\u00a0<code>{<\/code>\u00a0bracket. Type the following, replacing\u00a0<code>your-username<\/code>\u00a0with your GitHub username and\u00a0<code>myfirstchessapp<\/code>\u00a0with the name of your repository:<code>\"homepage\": \"https:\/\/your-username.github.io\/myfirstchessapp\",<\/code><\/li><li>Ensure you include the comma\u00a0<code>,<\/code>\u00a0at the end, as shown above, so that the rest of the file continues to work correctly.<\/li><\/ul>Here\u2019s an example of what the beginning of\u00a0<code>package.json<\/code>\u00a0should look like with the new\u00a0<code>homepage<\/code>\u00a0field added:<code>{ \"homepage\": \"https:\/\/your-username.github.io\/myfirstchessapp\", \"name\": \"myfirstchessapp\", \"version\": \"0.1.0\", \"private\": true, ... }<\/code>\n<ul class=\"wp-block-list\">\n<li>You\u2019ll see other fields like\u00a0<code>name<\/code>\u00a0and\u00a0<code>version<\/code>\u2014just add\u00a0<code>homepage<\/code>\u00a0as the first entry.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Save the File<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Press\u00a0<code>Ctrl + S<\/code>\u00a0(or\u00a0<code>Cmd + S<\/code>\u00a0on Mac) to save your changes.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#3-add-deployment-scripts-in-packagejson\"><\/a><strong>3. Add Deployment Scripts in&nbsp;<code>package.json<\/code><\/strong><\/h4>\n\n\n\n<p>Now we\u2019ll add two scripts in&nbsp;<code>package.json<\/code>&nbsp;to handle the build and deployment steps.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In\u00a0<code>package.json<\/code>, find the\u00a0<code>\"scripts\"<\/code>\u00a0section, which should look something like this:<code>\"scripts\": { \"start\": \"react-scripts start\", \"build\": \"react-scripts build\", \"test\": \"react-scripts test\", \"eject\": \"react-scripts eject\" } <\/code>Add the\u00a0<code>predeploy<\/code>\u00a0and\u00a0<code>deploy<\/code>\u00a0scripts inside the\u00a0<code>\"scripts\"<\/code>\u00a0section, so it looks like this:<code>\"scripts\": { \"start\": \"react-scripts start\", \"build\": \"react-scripts build\", \"predeploy\": \"npm run build\", \"deploy\": \"gh-pages -d build\" } <\/code><strong>Explanation<\/strong>:\n<ul class=\"wp-block-list\">\n<li><code>\"predeploy\": \"npm run build\"<\/code>\u00a0tells npm to run the\u00a0<code>build<\/code>\u00a0script first, creating an optimized production version of your app in the\u00a0<code>build<\/code>\u00a0folder.<\/li>\n\n\n\n<li><code>\"deploy\": \"gh-pages -d build\"<\/code>\u00a0uses\u00a0<code>gh-pages<\/code>\u00a0to publish the contents of the\u00a0<code>build<\/code>\u00a0folder to GitHub Pages.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#4-build-your-project\"><\/a><strong>4. Build Your Project<\/strong><\/h4>\n\n\n\n<p>Before deploying, it\u2019s a good idea to manually build your project to make sure everything compiles correctly.<br>In the terminal, run:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This command creates a&nbsp;<code>build<\/code>&nbsp;folder with all the production-ready files for your project. These files will be published to GitHub Pages.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#5-deploy-your-project\"><\/a><strong>5. Deploy Your Project<\/strong><\/h4>\n\n\n\n<p>Now that your project is built, it\u2019s time to deploy it to GitHub Pages! Run the following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run deploy<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>This command first runs the&nbsp;<code>predeploy<\/code>&nbsp;script to build your project, then runs&nbsp;<code>deploy<\/code>&nbsp;to publish the&nbsp;<code>build<\/code>&nbsp;folder to a branch called&nbsp;<code>gh-pages<\/code>&nbsp;on GitHub. GitHub Pages will use this branch to host your live site.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#6-access-your-live-site\"><\/a><strong>6. Access Your Live Site<\/strong><\/h4>\n\n\n\n<p>After deployment, your site should be live at:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;your-username.github.io\/myfirstchessapp<\/code><\/pre>\n\n\n\n<p>Replace&nbsp;<code>your-username<\/code>&nbsp;and&nbsp;<code>myfirstchessapp<\/code>&nbsp;with your actual GitHub username and repository name.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note<\/strong>: It may take a few minutes for GitHub to process the deployment. If your site doesn\u2019t appear immediately, wait a moment and refresh the page.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#updating-the-reference-to-stockfish-in-appjs\"><\/a>Updating the Reference to Stockfish in&nbsp;<code>App.js<\/code><\/h2>\n\n\n\n<p>When deploying to GitHub Pages, it\u2019s important to adjust the file paths in your code to account for the way GitHub Pages serves your project. By default, GitHub Pages hosts your project under a subdirectory based on your repository name (e.g.,&nbsp;<code>https:\/\/your-username.github.io\/repo-name<\/code>). This affects any file paths that start with a&nbsp;<code>\/<\/code>, as these will try to load from the root directory instead of your project\u2019s subdirectory.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#why-update-the-stockfish-path\"><\/a>Why Update the Stockfish Path?<\/h3>\n\n\n\n<p>In&nbsp;<code>App.js<\/code>, if you load Stockfish with a path like&nbsp;<code>\/js\/stockfish-16.1-lite-single.js<\/code>, it works locally because it points to the root folder of your development environment. However, on GitHub Pages, this same path would point to&nbsp;<code>https:\/\/your-username.github.io\/js\/stockfish-16.1-lite-single.js<\/code>&nbsp;instead of the correct subdirectory, causing the file not to load.<br>To make sure Stockfish loads correctly on GitHub Pages, we\u2019ll use&nbsp;<code>process.env.PUBLIC_URL<\/code>&nbsp;to dynamically generate the correct path, so it works both locally and in production.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#update-the-stockfish-path-in-appjs\"><\/a><strong>Update the Stockfish Path in&nbsp;<code>App.js<\/code><\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Locate the Stockfish Initialization in\u00a0<code>App.js<\/code><\/strong>:\n<ul class=\"wp-block-list\">\n<li>Find the line in\u00a0<code>App.js<\/code>\u00a0where you load the Stockfish file, which should look something like this:<code>const stockfishWorker = new Worker(\"\/js\/stockfish-16.1-lite-single.js\");<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Update the Path Using\u00a0<code>process.env.PUBLIC_URL<\/code><\/strong>:\n<ul class=\"wp-block-list\">\n<li>Replace this line with the following:<code>const stockfishWorker = new Worker(`${process.env.PUBLIC_URL}\/js\/stockfish-16.1-lite-single.js`); <\/code>Explanation:\u00a0<code>process.env.PUBLIC_URL<\/code>\u00a0dynamically adjusts to the correct base URL. Locally, it defaults to\u00a0<code>\/<\/code>, but on GitHub Pages, it adjusts to your repository\u2019s subdirectory (e.g.,\u00a0<code>https:\/\/your-username.github.io\/repo-name<\/code>). This ensures that the Stockfish file loads correctly in both environments.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#redeploy-your-project\"><\/a>Redeploy Your Project<\/h3>\n\n\n\n<p>After updating the Stockfish path, redeploy your project to GitHub Pages to apply the changes:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Build the Project<\/strong>:\u00a0<code>npm run build<\/code><\/li>\n\n\n\n<li><strong>Deploy to GitHub Pages<\/strong>:\u00a0<code>npm run deploy<\/code><\/li>\n\n\n\n<li><strong>Verify the Deployment<\/strong>:\n<ul class=\"wp-block-list\">\n<li>Once the deployment is complete, visit your GitHub Pages URL to confirm that the Stockfish file loads correctly.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>By updating the Stockfish path to use&nbsp;<code>process.env.PUBLIC_URL<\/code>, you ensure that GitHub Pages serves the file from the correct location, avoiding broken paths and loading issues. This simple adjustment will make sure your app works seamlessly in both local development and production on GitHub Pages.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note<\/strong>: Use&nbsp;<code>process.env.PUBLIC_URL<\/code>&nbsp;for all resource files (e.g., images, JavaScript files like Stockfish, CSS files) to ensure they load correctly on GitHub Pages. This approach adjusts paths automatically based on whether your app is running locally or on GitHub Pages, avoiding broken paths and missing resources.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#summary\"><\/a>Summary<\/h2>\n\n\n\n<p>In this blog, we explored the process of deploying a chess web application to&nbsp;<a href=\"https:\/\/pages.github.com\/\">GitHub Pages<\/a>, with a focus on optimizing paths and resources for smooth loading in a production environment. Starting with the basics of initializing Git, creating a repository, and setting up deployment scripts, we then dived into the specific challenges of working with GitHub Pages, particularly how to correctly reference resource files like images and external libraries such as Stockfish. By using&nbsp;<code>process.env.PUBLIC_URL<\/code>&nbsp;for all resource paths, we ensured compatibility across both local and GitHub Pages environments, preventing common loading issues. Now, your chess app is live and fully functional on GitHub Pages, ready for users to enjoy!<br>If you have any questions or comments, post below and I will try to get back to you.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/lichess.org\/@\/HollowLeaf\/blog\/chess-web-programming-part-three-deploying-your-application\/J3GdsKZP#learn-more\"><\/a>Learn More<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/reactjs.org\/\">React<\/a><\/strong>\u00a0\u2013 A JavaScript library for building user interfaces.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/github.com\/Clariity\/react-chessboard\">react-chessboard<\/a><\/strong>\u00a0\u2013 A React component for rendering a chessboard.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/github.com\/jhlywa\/chess.js\">chess.js<\/a><\/strong>\u00a0\u2013 A library for handling chess game rules and move validation.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/stockfishchess.org\/\">Stockfish<\/a><\/strong>\u00a0\u2013 A powerful open-source chess engine.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/github.com\/niklasf\/stockfish.js\">stockfish.js<\/a><\/strong>\u00a0\u2013 A JavaScript and WebAssembly version of Stockfish for web applications.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/github.com\/\">GitHub<\/a><\/strong>\u00a0\u2013 A platform for version control and collaboration.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Deploying you Application In October 2023, I began learning modern web programming and used&nbsp;Chessboard Magic&nbsp;as my first major project. What started as a way to practice my skills has grown into something much larger\u2014Chessboard Magic now includes 34 different chess-based applications! Building it was both a rewarding challenge and a fantastic way to dive deeper [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":33,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-32","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":1,"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/posts\/32\/revisions\/34"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/media\/33"}],"wp:attachment":[{"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.chessboardmagic.com\/index.php\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}