I've built an app with Electron that displays React pages. I'm using react-router-dom v6 to switch between tabs. When I run the app with npm start everything works fine, however, after npm run build (I use electron-builder), the path starts with /C:/ and therefore does not render the correct page.
Okay, this was very easy to fix. Instead of BrowserRouter I just used HashRouter and everything works perfectly.
Related
I'm trying to deploy a create-react-app to a relative path on GitHub pages with a custom domain. E.g. www.example.com/myproject
I'm using react-router-dom, react-router-redux and react-router-bootstrap
I've set homepage to http://www.example.com/myproject in packages.json (tried homepage = "." too) and also configured basename for my history:
...
export const history = createHistory({ basename: '/myproject' });
const middleware = [thunk, routerMiddleware(history)];
...
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);
The deployed app works on www.mydomain.com/myproject and I can navigate via the app links.
But I got 404 when I try to enter a path directly (eg. www.example.com/myproject/account) or if I do browser refresh on a subpage.
Long term goal is to configure different relative paths for dev and prod environments as described in this answer but first I just need to make it work in deployment.
Problem: URL gets evaluated on server side
When you enter a new URL into address bar of the browser or refreshes the page, browser requests server (in this case GitHub pages server) for that URL. At this point, client side router (react-router) can't take action as it is not yet loaded for that page. Now server looks for a route that matches /accounts won't find it (because routing is done on client side) and returns 404.
Solution
If you had control over the server, you can serve index.html for all routes.
This is explained in create react app documentation serving apps with client side routing.
As we don't have that control in case of GitHub pages, We can try these.
Easy Solution
Switch from browserHistory to hashHistory
With this change, your URLs will go from looking like
www.example.com/myproject/account
to
www.example.com/myproject/#/account
So it's a bit messy.
Harder solution
Get GitHub pages to redirect to index.html on all requests. Basically you have to add a 404.html in your build directory with code to redirect to index.html. More on how to do that.
Create React App has documentation around client-side routing in GitHub pages too
The best way to solve the issue is create a copy of index.html and call it 404.html for production build. To make it add this to package.json scripts:
"build": "react-scripts build && cp build/index.html build/404.html"
The reason is because the browser may not have cached the routing code yet so it causes a 404 error if you go to a route other than the index.
Side note if anyone is using ZEIT Now to deploy (although gh-pages would be similar); I managed (after a deal of time) to work out how to fix it. It was a bit of an effort so I decided to make an article on it for anyone else who gets stuck.
https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb
I'm using Aurelia JS skeleton for TS and JSPM from github as a started app and as I was playing with it and opened a second browser tab to compare data on different pages. But as I worked in one tab, what I did was duplicated on the other tab. So I opened an incognito tab and tried that. It did the same thing! Is there a way to configure it so that I can have a different view on each tab within the same app?
Browsersync does this, you can turn off things like mirroring when you surf to localhost:3001 (this is the default url for the Aurelia CLI, so it could be different in your setup)
when running the skeleton you can disable the browsersync feature you are seeing by simply running gulp serve instead of gulp watch from the terminal
I would like to consume the gmaps.js external library in an Angular 2 application. I'm usng Webpack for loading my modules.
Could anyone please help me how i could that?
Thank you in advance...
Well there is a library already built for that: angular2-google-maps
https://angular-maps.com/
I'm currently researching around this problem too because it seems not to be actually a complete out-of-the-box solution at this time since it lacks several features and has a couple of relevant issues, as you can see from the project github open issues page.
but it works indeed and could be the way to go if you're looking for easy to use components for a small side feature of your application.
It's not hard to use it with webpack:
-install the ng2 google maps via npm
npm install angular2-google-maps --save
-import the needed elements
/**
* ng2 Google maps
*/
import {
MapsAPILoader,
NoOpMapsAPILoader,
MouseEvent,
GOOGLE_MAPS_DIRECTIVES,
GOOGLE_MAPS_PROVIDERS
} from 'angular2-google-maps/core';
-and use them within your component: the getting started plunker should work with webpack as well if you take a look at app/main.ts ( I'm not going to post it here 'cause the code isn't mine )
http://plnkr.co/edit/YX7W20?p=preview
I'm building my angularjs application to Phonegap Android application. I have builded the project using Yeoman/Grunt and I get it to work on webserver after that, but When build with Cordova/Phonegap to Android .apk file and installed on device I get only this to console:
GET file:///android_asset/www/app/_main/main.tpl.html net::ERR_FILE_NOT_FOUND
When I debug the application with Chrome android debugging and look the source it sohws index.html as empty (but it can be can it? Since it has to load the angularjs to try to get to the main template, and that happens in the index.html) and I can't find any of the other .html files from there.
\platforms\android\assets\www
In cordovas android project folder everything seems to be just as it's upposed to be.
Figured it out by myself. It was due to the folder name.
"_main"
So the '_' -character broke it. :)
I am using google web components from the following page but it seems that it has a lot of error. A lot of file is not found. Note: I am using google sign in and google analytics.
Google Web Components
How to resolve the issue without downloading and replace the the missing file path one by one?
You approach is completely wrong.
TL;DR One can not simply refer the url for the file and hope that relative paths in it are resolved automagically. The workflow is a way more complicated.
You should create an application (the easiest way is to use Yeoman’s generator for that). Than you should explicitly specify, which components you want to use with bower:
bower install google-calendar --save
... etc
That would install the components locally (--save is to update your bower.json).
Then you probably would vulcanize everything (thanks yeoman generator, grunt script comes with all the tasks prepared.) Your project is now ready to deploy.
Hope it helps.
You should be able to install the missing dependency components the same way you got your Google Web Component. Whether that is via download or bower or whatever, just make sure the relative paths line up. Even if you create a build task or generator you will still need the components dependencies correctly referenced.