joplin-notes/Export-9fad9947-5bd5-4195-952b-6512c5a4beb1/Web development 83dd4e6675f04ba782a6865a434a0598/GitHub cc67e8c9e0c945a587b473d533a8d80a/Deploy react site 9aac11a6fab14d8b9165b5927bff7405.md

Deploy react site

• for vite use this https://dev.to/rashidshamloo/deploying-vite-react-app-to-github-pages-35hf

From site ‘https://create-react-app.dev/docs/deployment/’

GitHub Pages

Note: this feature is available with react-scripts@0.2.0 and higher.

Step 1: Add homepage to package.json

The step below is important!

If you skip it, your app will not deploy correctly.

Open your package.json and add a homepage field for your project:

"homepage": "https://myusername.github.io/my-app",

or for a GitHub user page:

"homepage": "https://myusername.github.io",

or for a custom domain page:

"homepage": "https://mywebsite.com",

Create React App uses the homepage field to determine the root URL in the built HTML file.

Step 2: Install gh-pages and add deploy to scripts in package.json

Now, whenever you run npm run build, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.

To publish it at https://myusername.github.io/my-app, run:

npm install --save gh-pagesCopy

Alternatively you may use yarn:

yarn add gh-pagesCopy

Add the following scripts in your package.json:

"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

The predeploy script will run automatically before deploy is run.

If you are deploying to a GitHub user page instead of a project page you'll need to make one additional modification:

1. Tweak your package.json scripts to push deployments to master:

 "scripts": { 
   "predeploy": "npm run build",
-   "deploy": "gh-pages -d build",
+   "deploy": "gh-pages -b master -d build",

"scripts": { "predeploy": "npm run build",- "deploy": "gh-pages -d build",+ "deploy": "gh-pages -b master -d build",Copy

Step 3: Deploy the site by running npm run deploy

Then run:

npm run deploy

Step 4: For a project page, ensure your project’s settings use gh-pages

Finally, make sure GitHub Pages option in your GitHub project settings is set to use the gh-pages branch:

Step 5: Optionally, configure the domain

You can configure a custom domain with GitHub Pages by adding a CNAME file to the public/ folder.

Your CNAME file should look like this:

mywebsite.com