rekit with github pages - reactjs

I am trying to setup my react application on github pages with uses rekit. There are no errors but the build is empty. Standard react create app works fine with gh-pages but application created using rekit does not.

By default Rekit builds the project into the "build" folder, have you checked if it's empty? If not, you can verify it by the default build server at http://localhost:6078 by default.
Another possible reason is, Rekit uses React Router, when uploaded to gh-pages the root path is like "http://supnate.github.io/prj-name" but the local dev server may runs at root path "/". If so, you may update "src/common/routeConfig.js" to set the root path to your project name. And you need to test it at local with "http://localhost:6076/prj-name".

Related

How can I setup a react project in local with files I downloaded from server?

I want to setup already created react app in my local for further updation. I only have files uploaded to the server public_html.
Directory view
You can view the files in my root folder here.
Is it possible to setup react project like that. If so someone please help.
This command should work if everything is set up correctly and you have all the requirements installed locally. npm start

How to deploy React application on sub folder for local development?

I have 2 react applications that I am trying to run locally.
For example:
I have application number 1 that is login application that run on localhost:3000
I need application number 2 to run on localhost:3001/portal <= this is a very simple application that does not even have a router baked into it.
My current solution is:
In application number one is:
BROWSER=none
HOST=localhost
PORT=3000
no homepage property in package.json file.
In application number 2 I go into package.json file and add homepage property. I set up my .env file as:
BROWSER=none
HOST=localhost
PORT=3001
Currently application does get locally deployed for development on https://localhost:3001/portal. However, when I navigate to it all I see is a blank page. I feel like I am missing something and application does not know where to serve files from.
What the set up should be to run 2 applications with on of them on a sub directory?
After longer research I found a thread where its explained in very detail how to accomplish that.
How should I configure create-react-app to serve app from subdirectory?
You should set up an environment variable in youe .env file like so:
HOST=localhost
PUBLIC_URL=/your-subfolder-name
PORT=3000 <== (this is optional, if you want your application to run on port. In my case I was running multiplle applications there for each application had different port).
After variables are set up and you are using any type of router, you will need to calculate your routes based of that relative paths. To get your default paths you can do it by doing so:
process.env.PUBLIC_URL; <== (This will return your variable value that you set up in .env file).
Because I am using rescripts package I had to change react-scripts package. version The minimal version I had to install in order for react to read PUBLIC_URL variable from .env was 3.4.1. The reason solution above did not work for me because rescripts version was lower than 3.4.1.
"react-scripts": "3.4.1",

Using /build as source for a GitHub page for a React app

I want to push a React app to GitHub and subsequently point the build folder as the root to GitHub pages.
There seems to be a doc here : https://create-react-app.dev/docs/deployment/#github-pages
I want to know why this won't work ?
I push the entire react app to github.
I do npm run build on my localhost.
I set source to /build instead of /root - but I can't seem to set this
Is there a way to set the path (source) of the custom domain to /build?

IBM Cloud (Bluemix) React deploy routing error

I've managed to deploy a react app (create-react-app) to Bluemix using cloud foundry with a sataticfile, everything is working fine except form one thing: routing.
I'm using BrowserRouter to manage routing so when you write the url's path manually I get a 404 error. I know I have to configure the staticfile to use the index.html as default, the question is how to configure this file on bluemix.
My build configuration looks like this:
And my deploy:
For now I've solved it using HashRoute, but that hash is awful and really bad for SEO as I read somewhere here.
I solved it, just create a file called: Staticfile with pushstate: enabled and save it on the public folder. I was saving it on the src folder so, when the react-app was built the Staticfile wasn't on the root directory.

Can I deploy react.js web app to a share hosting?

I am wondering if it is possible to deploy react.js web app that I've built to a share hosting site that does not have node.js installed?
I use webpack to build the application and it creates normal html, js, css file. I uploaded the static folder that includes all those html, js(bundle.js) and css files, but when I request the site, the server reply with 404 bundle.js not found response.
Use npm run build, you should get a folder with the index html file inside that will run your app. Try this with xampp first before you actually deploy to your server.
Here is everything step by step
npm run build
or
yarn run build
it will generate a build folder that looks like this:
Copy everything and move it to the htdocs in xampp or ftp upload the directory to the public_html file in your hosting
Yes you sure can put react on a shared hosting provider.
Seeing as you're getting a 404 error (not found), you are probably referencing your react file/bundle incorrectly. It might not even be named bundle.js if you're using a boilerplate to create your application.
Can you give more information? What does your index.html file look like? What does your directory structure look like? If you are able to post these files I can tell you what the issue is.
Update:
The answer below should be accepted. (Although this would assume that you have the ability to make a build which you have not verified or not.)
Make a build using the build command through whatever boilerplate you used. Deploy those files on your shared hosting server. Make sure that index.html is at the root of where your server is expecting the root to be and your app should be live.
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.
in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory.
so if your react app is ready to go, edit your package.json file add a new key value:
"homepage":"http://yourdomain.com"
then create a build using following command:
npm run build
after running the command you will see a new directory named build in your app root. It will contain js and css for the app and a index.html file. You need to upload all the content inside build directory to public_html directory, and that's all, go to your domain and your app will be working just fine.

Resources