Develop Reference

How to Update Deployed React App on GitHub Pages

recently I have deployed my first React App on GitHub Pages
https://karan-dhingra.github.io/lct/
Now I updated react app and my changes are not reflected on GitHub Pages. But everything was working well on Localhost. So, please guide me on how can I update my deployed React App on GitHub Pages.

Just we need to run 3-4 commands
git init
git remote ****************.git [ Here we will add our repository link ending with.git you will found it in the code option in your repo.
npm run deploy [Make sure you have installed gh pages first]
git add .
git commit -m "Here you write message while committing, you can write anything here"
git push origin master
So, with using these commands everything will work well.

Make sure you save the code in the IDE. after saving check with "git status" command and commit & push to git repo and the changes will be reflected

In my case, the lines below have helped. My app is deployed via gh-pages:
git add .
git commit -m '...'
npm run deploy

Trying to deploy a create-react-app project to Netlify

My current project is having trouble building in the Netlify platform. I am able to build my app locally just fine and host it through gh-pages, but when I try to build the same app, I run into this error.
Netlify Deploy Log
11:10:03 PM: Failed to compile.
11:10:03 PM:
11:10:03 PM: ./src/pages/Mortgage.js
11:10:03 PM: Cannot find file '../hooks/UseWindowSize.js' in './src/pages'.
Current Folder Structure
src
--hooks
----UseWindowSize.js
--pages
----Home.js
----Mortgage.js
Any idea what the issue might be?

This is how I managed to get it working.
I added the site on Netlify by linking it via a Github repository. Then inside on Netlify, I did the flowing:
Click on the Sites menu link and select the site you would like to deploy
To access the Settings, click on either:
The Site Settings button - is located in the first block/widget below the menu
Deploys in the menu next to Site Overview then click the Deploy setting button - located in the first block/widget below the menu
Below the first block/widget click the link Build & deploy -
located in the left side navigation aside
In the Build settings widget block, click the Edit settings button.
Change Base directory to ./
Change Build command to npm run build
Change Publish directory to ./build
Scroll down to Environment variables and add the key PRODUCTION, set the value of PRODUCTION to true
Retry your build to see if the configuration worked.
Side note: It's a fresh create react app react install, no 3rd party librarys yet.
Happy Coding =)
Pro Tip - create a netlify.toml file in the root of your project and add the following:
# Production context:
# All deploys from the main repository branch
# will inherit these settings.
[context.production]
command = "npm run build"
[context.production.environment]
PRODUCTION = "true"
Ive noticed that using a boolean value as a string works but if you use it like normal the build breaks

To be honest, using Vercel with React is way easier, and it's also better.
Push project onto a repository, go to vercel's site, login with Github, and choose your repository and it does 95% for you.
Netlify also has some problems with React-router, so Vercel is over all a clear winner.

How to create files using JavaScript in GitHub? [duplicate]

I made a website using Node.js as the server. As I know, the node.js file should start working by typing commands in terminal, so I'm not sure if Github Pages supports node.js-hosting. So what should I do?

GitHub pages host only static HTML pages. No server side technology is supported, so Node.js applications won't run on GitHub pages. There are lots of hosting providers, as listed on the Node.js wiki.
App fog seems to be the most economical as it provides free hosting for projects with 2GB of RAM (which is pretty good if you ask me).
As stated here, AppFog removed their free plan for new users.
If you want to host static pages on GitHub, then read this guide. If you plan on using Jekyll, then this guide will be very helpful.

We, the Javascript lovers, don't have to use Ruby (Jekyll or Octopress) to generate static pages in Github pages, we can use Node.js and Harp, for example:
These are the steps. Abstract:
Create a New Repository
Clone the Repository
git clone https://github.com/your-github-user-name/your-github-user-name.github.io.git
Initialize a Harp app (locally):
harp init _harp
make sure to name the folder with an underscore at the beginning; when you deploy to GitHub Pages, you don’t want your source files to be served.
Compile your Harp app
harp compile _harp ./
Deploy to Gihub
git add -A
git commit -a -m "First Harp + Pages commit"
git push origin master
And this is a cool tutorial with details about nice stuff like layouts, partials, Jade and Less.

I was able to set up github actions to automatically commit the results of a node build command (yarn build in my case but it should work with npm too) to the gh-pages branch whenever a new commit is pushed to master.
While not completely ideal as i'd like to avoid committing the built files, it seems like this is currently the only way to publish to github pages and should work for any frontend Node.js app (or app built with a frontend framework like React or Vue) that can be served as static files.
I based my workflow off of this guide for a different react library, and had to make the following changes to get it to work for me:
updated the "setup node" step to use the version found here since the one from the sample i was basing it off of was throwing errors because it could not find the correct action.
remove the line containing yarn export because that command does not exist and it doesn't seem to add anything helpful (you may also want to change the build line above it to suit your needs)
I also added an env directive to the yarn build step so that I can include the SHA hash of the commit that generated the build inside my app, but this is optional
Here is my full github action:
name: github pages
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout#v2
- name: Setup Node
uses: actions/setup-node#v2-beta
with:
node-version: '12'
- name: Get yarn cache
id: yarn-cache
run: echo "::set-output name=dir::$(yarn cache dir)"
- name: Cache dependencies
uses: actions/cache#v2
with:
path: ${{ steps.yarn-cache.outputs.dir }}
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- run: yarn install --frozen-lockfile
- run: yarn build
env:
REACT_APP_GIT_SHA: ${{ github.SHA }}
- name: Deploy
uses: peaceiris/actions-gh-pages#v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
Alternative solution
The docs for next.js also provides instructions for setting up with Vercel which appears to be a hosting service for node.js apps similar to github pages. I have not tried this though and so cannot speak to how well it works.

No, You cannot publish on Github pages. Try Heroku or something like that. You can only deploy static sites on github pages. You can't deploy a server on github pages.

No,
GitHub allows hosting only static websites(having only HTML, CSS, javascript).
Dynamic websites(having databases, servers, and all) can't be hosted as a Github page.
And node.js app is a server-based website, we can't host it on Github.
You can try Heroku, Openshift to host your website.

ahm. Yep, as most answer says. Github Pages only process html and css and a front-end JS.
But you can use JS framework like Gatsby which is mainly known to generate static purely static files, it gathers the data on compilation.
Then use that generated folder as the directory of the site.

I would like to add that it IS very much possible, as I am doing it right now. Here's how I'm doing it:
(I'm going to assume you have a package and/or directory ready to publish.)
In the root of your package.json, add
"homepage": "https://{pages-endpoint}/{repo}",
Where the pages-endpoint is the blah.github.io endpoint you specified in the Settings -> Pages portion of your repository, and repo is the name of your repository.
Then make sure you npm install --global gh-pages --save-dev. You need the --global to ensure the bin file is on your PATH and --save-dev should add it as a dependency in your package.json
After that, just npm run build && gh-pages -d build. The -d specifies your output build directory. The standard is build, but mine was public. If it's different, just change it.
Lastly, make sure in the Settings -> Pages section, you select gh-pages as the branch to host and leave the directory as / (root). Once it's built, your site should be available at your github.io endpoint.
Happy Dev-ing!

It's very simple steps to push your node js application from local to GitHub.
Steps:
First create a new repository on GitHub
Open Git CMD installed to your system (Install GitHub Desktop)
Clone the repository to your system with the command: git clone repo-url
Now copy all your application files to this cloned library if it's not there
Get everything ready to commit: git add -A
Commit the tracked changes and prepares them to be pushed to a remote repository: git commit -a -m "First Commit"
Push the changes in your local repository to GitHub: git push origin master

react serve works, but deploying to github pages or heroku fails

I'm trying to deploy this repo
https://github.com/stepseazy/checkers/
to this website
https://stepseazy.github.io/checkers
However, I'm getting 404 errors. I also tried heroku. It does work when I serve the build locally. Not sure what's wrong. Please help!!!

You'll have to distinguish your dev environment and your production one. On dev mode, you run npm start that does things (as instructed in package.json) and act as a local server and serves you project on http://localhost:3000. You simply cannot use that in production mode on Github or Heroku.
You need to deploy the built version, running npm run build. It will create a javascript file in a dist folder. You might want, on Github, create a gh-pages branch, build this production ready file on it, create an index.html file that serves it, and commit that.
I'm no expert on Heroku but it might be a slightly similar case (run post-deploy scripts that build your app and serve it through an index.html file).
Hope that help.

Is it possible to run React project without npm start?

I'm in a big trouble. Working in a part time in a company they're looking for a new web technology to build "web-component" in their website.
They have started to use AngularJS (first version) and I told them that, with the recent evolution of this framework, it's not the right period of time to deal with it.
That's why I began to be interested in ReactJS. However, they don't have a node.js server infrastructure (and that's why AngularJS suits to them, only one browser is sufficient) so it's impossible to run it with something like "npm start".
SO ! My question is (as my post's title says...) :
Is it possible to run ReactJS without server side ?
I've tried with the following line in my header
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
But it remains a blank page.
Maybe there is something I don't understant in the react structure and that's why I'm looking for some help/explanations from you.
I hope I have been clear enough ! Thank you in advance for answer.

It is absolutely possible to run a React app without a production node server. Facebook provides an easy-to-use project bootstrapper that you can read about here
That being said, developers may need to use a node dev server locally via npm start, as well as using node to perform production builds via npm run build. But one can take the build output from npm run build and serve it from any static server and have a working react application.

For those who are getting 404's after deploying in a sub directory. Make sure to add the path in package.json as homepage.
"homepage": "https://example.com/SUB-DIRECTORY",

You should insert "homepage": "./" into your package.json file, then use building react-script command like npm run build.

I did it by using serve, as part of the build step in Jenkins. To install it, execute the command:
npm install -g serve
Then, to serve it:
serve -s build
Please, refer to project page for more information: https://github.com/zeit/serve