I have a create-react-app project where I am creating a front side for users and an admin side, and want this two sides to use the same code base and run on one time instead of building two separate apps and each will use a different theme and files.
As suggested in some places I have ejected my create-react-app App and then tried adding a different entry point as suggested in this tutorial:
http://imshuai.com/create-react-app-multiple-entry-points/
but when i navigate to /admin nothing happens...any suggestions?
I am using react-router-dom as well.
When you navigate to /foo Webpack dev server has a little convenience feature to consider /foo/index.html as well if /foo does not exist. This is probably meant to be compatible with the user's expectations of other HTTP servers (i.e. Apache, Nginx). This means that /admin resolves to either something actually called /admin or /admin/index.html if the former is unavailable.
If you did follow the linked tutorial, the path you are looking for is clearly not supposed to be /admin but /admin.html. And your normal 'user' front end remains at /index.html, which is why you can still navigate to it the same way you were used to before ejecting.
Note: I don't speak Japanese, but I do read Webpack, so I just looked at the sample Webpack config and layout of the build/ folder as described in the tutorial.
Related
after deploy gh-pages
After I deploy the my app to gh-pages, it does not start with http://localhost:3000. It starts with http://localhost:3000/appname and can not viewed in my app; local and gh pages, I can cannot see data on app on my homepage.
I received an “Ask to Answer” on this 5 years after the original answers were provided, suggesting someone is experiencing a new problem with this. The following scenarios are what I could think of off the top of my head.
A service must be running on the port.
If you’re going to http://localhost:3000 in your browser and not seeing anything, then you’re not running a server capable of responding to HTTP requests.
The service may not be a web server.
Web servers are an HTTP server, but there are many other kinds. For example, if you have a telnet server running on port 3000, it won’t respond to HTTP requests in the browser. If you’re running something other than an HTTP server, then make sure you’re using the appropriate client.
I KNOW something is running and I still can’t access it!
If you’re a developer saying “BUT I AM running a server, I KNOW I AM”… double check. Servers frequently crash in development due to unforeseen bugs.
If you’re unsure whether a server is running, inspect the port manually (using commands on the terminal). The approach for doing this differs on each operating system and it doesn’t necessarily feel straightforward if you’re brand new to it… and if you’re not brand new to it, I’ll bet you’ll have to look up the commands. I wrote a global Node.js-based CLI utility to help with this scenario: coreybutler/porthog. The tool will tell you which process is “hogging” a port, providing insight into whether anything is actually running on the local port or not. A port scanner could also help.
If Porthog looks empty, like the screen below, then nothing is running on the port.
If the tool responds, then something is running on the port and you should be getting a response. For example, I launched a Fenix Web Server on port 3000 before running the tool a second time.
If none of this works for you, then you should probably find someone to help walk you through it in person.
Check your package.json there is a property called homepage, according to your screenshots that value is now "redux-store" change it to "/" it will change the homepage and you can access your site at http://localhost:3000
Try using create-react-app to create your app
npx create-react-app my-app // (if using npx and don't want to install package) else just remove npx but first install create-react-app using command npm install mentioned in the end
cd my-app
npm start
Install create react app first using
npm install -g create-react-app
Then open http://localhost:3000/ to see your app.
That is expected when you deploy your apps with gh-pages, which is to separate different (possible) apps from different repositories of yours. This helps us to host different applications from a single domain. (Correct me if I am wrong here)
So, in case of React app, by any chance, if you have used routing in your application, you may want to try redirecting the page /appname to /.
e.g.
...
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
...
<Router>
<Switch>
<Route exact path="/appname">
<Redirect to="/" />
</Route>
<Route exact path="/" component={HomeComponent} />
...
</Switch>
</Router>
I find a solution at https://github.com/facebook/create-react-app/issues/1765.
"The homepage setting only affects paths to JS and CSS in the produced HTML. It can’t affect your routing configuration.
path='/' in your router configuration means you’re literally matching /. Only https://rockchalkwushock.github.io/ would match /.
But your project is on /rcws-development/. However if you change the routing configuration to say /rcws-development/ then this won’t work in development on npm start because the development server serves from /.
Two solutions:
Don’t use HTML5 history on GitHub pages. Use hashHistory instead. Your URLs will look like https://rockchalkwushock.github.io/rcws-development/#path/inside/the/app.
Use process.env.PUBLIC_URL in your route definitions so that they work both in development and after deployment. For example: <Route path={process.env.PUBLIC_URL + '/'}>. This will be empty in development and rcws-development (inferred from homepage) in production.
In the future, we might flip the development server to also take homepage into account (#1582). If this happens, your project would get served at localhost:3000/rcws-development even locally so you'd bump into this issue earlier (and would have to use process.env.PUBLIC_URL in route definitions anyway). But we have not really decided on this yet."
from gaeron(https://github.com/gaearon)
Actually, if you want to do undo the changes you have made then, the most of the time we forget to remove this line of code from our package.json
"homepage": "https://your-github-username.github.io/your-repo-name"
so even if we are running our project locally then also we get localhost:3000/appName instead of localhost:3000
I have two separate apps. One is a react app that is deployed at www.example.com, the other is a completely separate blog app built with Gatsby.
I would like users to be able to visit www.example.com/blog and see the blog app without using a redirect that would change the URL.
Both apps are hosted as separate firebase projects, is this achievable?
There's a feature called pathPrefix which purpose is what you are looking for.
You just need to set it in the main Gatsby configuration file (gatsby-config.js):
module.exports = {
pathPrefix: `/blog`,
}
Following the previous example, a link to /test-1 will be rewritten as /blog/test-1 automatically.
Another important consideration is to understand that all your building commands (build and serve) will need to be respectively flagged as:
gatsby build --prefix-paths
gatsby serve --prefix-paths
During development paths don't need to be prefixed.
In-app linking is handled automatically by Gatsby's Link component.
For pathnames you construct manually, there’s a helper function, withPrefix that prepends your path prefix in production.
Additional resources:
https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/asset-prefix/
https://www.gatsbyjs.com/docs/deploying-to-gitlab-pages/#add-path-prefix-to-gatsby
I am a bit struggle with support to a react js to support 2 different subdomains. Followings are the subdomains I need my app to support
www-dev.somedomain/apps/myapp
app-dev.somedomain/myapp
As you can see, react-app-path is also changing with the subdomains. I have defined PUBLIC_URL and REACT_APP_PATH in my .env file as below.
REACT_APP_PATH=/myapp
GENERATE_SOURCEMAP=false
PUBLIC_URL=/myapp
With above env vars app-dev... URL is working. If I change to the path to apps/myapp then www subdomain in working. I need a way to support both subdomains at once
How can I achieve this?
Finally, I solved this problem with the following steps; I was using Nginx to be redirected to the same host. The problem I have was with the paths.
www-dev.somedomain/apps/myapp
app-dev.somedomain/myapp
According to my Nginx configurations, both URLs were redirected to / in the server. Then the app couldn't find the static files because paths were different with domains. So to fix this, I did as below.
First, remove PUBLIC_URL from my env file. Then app files will be hosted at the / location
Added homepage attribute to package.json file. adding homepage will serve assets relative to index.html. Read more about homepage. Using `"homepage"` in package.json, without messing up paths for localhost
Since the app is using internal routing, I added simple Nginx rule to rewrite the location of static files as below.
rewrite /static/(.*)$ /static/$1 break;
This solved my problem with supporting two doamins.
No way, Your React app will be compiled into static HTML, JS, and CSS files, and the only time you can pass parameters to the build tool is before building, which is what you're doing right now. Once the building is complete, it can't be changed.
You can write two shell script, with different environment variable. Then invoke each of them will build different web app.
When I try to access a route like www.deployedWebApp.com/profiles I get a 404, bu when I access the root www.deployedWebApp.com/ and then click in the profiles button that pushes to /profiles it works. I suppose that it only loads the routes in the root / because the code for this route is at App.js but this can lead to poor UX due to sending the direct route www.deployedWebApp.com/profiles for a friend and getting a 404, so is there a way to fix this without a Back-end?
There are different ways to fix this issue dependent on your deployment method.
Deploying Static Server Using Serve serve -s build -l port.
As -s, --single Rewrite all not-found requests to index.html. Other options mentioned here also Building for Relative Paths
Using firebase, you can use this option Configure as a single-page app (rewrite all urls to /index.html)? (y/N).
It is a problem with GitHub pages, where I was hosting, when switching to firebase it works like a charm
I have a React application created by create-react-app. The app works fine, but I have run into a problem
I need to test som ad things on a plain html site, no additional React code. The problem I have is that the ads.txt tags need to be crawled by Google, which can take up to 24 hours on a new page/URL, time that I don't really have.
So I did the following. In my repo under /public folder I added a folder /ad-test with an index.html inside. When I serve it locally using npm start and go to http://localhost:3000/ad-test, it works fine.
Great, I thought and deployed it to the production environment, but now when I try to go to http://[my-site]/ad-test or http://[my-site]/yo-test/index.html it does not work (I get the React 404 site that I created).
I looked here and if I understand correctly, it is not possible to do it the way that I tried since the build stage will not include the public folder. Am I correct in this?
Any idea how to solve this?
EDIT:
I have a good knowledge of React and React Router in general, the app already uses <Switch><Route ... /></Switch> with a catch-all route directing to Not Found Component and the bottom.
The problem I have is that we include some ad scripts from an ad provider. The ads are not displayed in the application (adblockers totally removed from browser etc.) and the provider thinks that we have made errors in the React code.
We don't think that we made any errors (the ads were displayed fine in our test environment but not in prod) and we have to prove that React is not to blame for the ads not showing.
To do this we created a static HTML file with all ads hardcoded, no React components or other things that might disturb. BUT, because of ads and Google crawlers and ads.txt, we need to have the static test page under the same domain as our main page/application.
This is why I ask if it is possible to somehow add a static HTML that can be reached from http://my.page/test-page.html without being "intercepted" by react router, i.e. it exists outside React but on the same server.
When you use react by create-react-app, it means you are building a single-page application.
What this means is that after running npm run build you will have a build folder with only one html file called index.html in that fold.
This index.html does not know and has no relationship with your added 'index.html' in ad-test folder.
If you want your ad-test html to be recognised by react, you need to make it a component of app.js and use react-router to give it a pathname.
It is very simple.
First, install react-router-dom;
Second, set up react-router-dom;refer to https://reacttraining.com/react-router/web/guides/quick-start
Third, give your add-test component a pathname.Your js code should look something like this:
<Route path='/ad-test' component={AdTest} />
IMPORTANT:
After you deploy your app, always remember you just built a single-page application.
You only have one html in your app.
Please make sure when you test your app after you deployed you must tell your service provider that no matter what pathname a user inputs in the address bar you always redirect it to the index.html
The build stage includes the public folder:
If you have a picture in the public folder, and this picture was imported to other components it will be shown after you run npm run build
Hope it helps.
Have you tried playing with webserver configurations? It is usually setup to redirect all traffic to index.html. Maybe exclude your static html path from redirection?
Place test-page.html in public folder like
public/path-to-static-html/test-page.html
Configure webserver for
directing all traffic to index.html EXCEPT /path-to-static-html which
will be directed to test-page.html.
For example, in case of Apache
you will be setting the DirectoryIndex directive.