Comments (8)
There are technically two applications in this repository. One is for the backend which serves to static content or HTML, and the Angular portion of the app is only on the front-end. So I deployed the backend to Heroku (https://angular2-login-seed.herokuapp.com/api/....), and the front-end app is just in the gh-pages branch of this repository. When you visit https://domfarolino.com/angular2-login-seed you're hitting the static front-end angular app, and whenever the angular app needs some data to display on the page it hits the API deployed on Heroku. This make sense?
The front and back end are completely divorced, so the deep linking/routing is all done with the Angular app in the front-end.
from angular2-login-seed.
It is possible to deploy them all with one app, but it is messier. You'd need the backend application to serve the same HTML file for any route that does not start with /api/ so that the Angular router could actually handle each route itself (and not let the backend serve some nonesense), and furthermore you'd need to be serving the index from the dist/ folder that contains the compiled version of the angular app.
When creating a robust single page app in something like Angular it makes sense to let Angular (with all its features and glory etc) handle just about everything except for dynamic data collection, which is what the backend does in this application. So when you deploy to Heroku you should only be deploying the back-end app, now you can serve the front-end from anywhere and just make sure the Angular app hits the correct back-end.
Let me know if you need any more info/help
from angular2-login-seed.
Totally, I get that we have the Angular app and api app.
I'm having trouble with the Angular app right now.
I can't seem to use any of the deep links when I only host it.
The app runs fine when it first get's hit but if I refresh, the page breaks.
from angular2-login-seed.
Hmm, could you give me the URL you're hosting the Angular app at?
from angular2-login-seed.
Here we are
https://ng-login-seed.herokuapp.com/
Here are the reproduction steps
- pull the repo
- Change the following in package.json
- Move angular-cli to dependencies so they're installed by heroku
- Add the following pre and post install scripts as well as the http server start
"scripts": {
"start": "http-server ./dist",
"preinstall": "npm install -g http-server",
"postinstall": "ng build --prod"
},
- Push to heroku for deployment
- Navigate to the heroku page
- Refresh
Expected - the login screen should display correctly
Actual - there's a white screen
I haven't enabled cors so none of the api calls will work.
from angular2-login-seed.
Thanks for the information. http-server
is a simple server in that it will serve you whatever files you're trying to get (denoted by URL). If it is anything like python -m SimpleHTTPServer
it probably doesn't do much more than this (path aliasing and other things with logic). It is a dumb server, in that if a file exists it will give it to you. So if you visit /
, the server will automatically look for a /index.html
which exists since Angular built it. However this kind of server typically does not support deep-linking. Think about it, on the front end we've changed the URL from / => /login
at some point, but we've never told the server about this. When the URL changed, Angular knew what to do and it changed the front-end content accordingly. The server however, only remembers our first request that it was able to handle successfully - /
.
Fast forward to us refreshing the page after the URL changed on the front-end. Now we're actually saying, "hey server - serve us up the content at /login
for us" since our URL has changed to /login
. The server, http-server
in this case will look for a /login
folder in the ./dist
folder in your case instead of serving up index.html
. Since it can't find it, it will fail (different servers will fail differently). So the key to supporting deep-linking with a server is to serve the same static HTML index.html
no matter what the route we request is. Why is this? Well because we've already seen that Angular knows how to deal with those links when they are given, we just need to make the server more like a sieve, so that it will always let Angular respond.
Regarding http-server, I've never used it so I don't know if there's a way to say "hey server, on request of /
, /login
, register
, /heroes
, ... serve the same index.html
page no matter what". This is something you'll need to find out. With express/Node.js it is very very simple to do this.
Does this make sense why the deep-linking is failing? It is nothing to do with the Angular app, it is instead a fundamental issue that very watered-down basic http servers have when trying to serve single-page applications with routers built in. The idea is typically we want to serve the same static content no matter what request is made, and sometimes baking those rules into the server is simple.
from angular2-login-seed.
For example when I try to retrieve /login
when running the http-server locally in the ./dist
folder, I get the following error:
[Mon Nov 21 2016 17:02:24 GMT-0500 (EST)] "GET /login" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.100 Safari/537.36" [Mon Nov 21 2016 17:02:24 GMT-0500 (EST)] "GET /login" Error (404): "Not found"
Because we've got no rule telling the server to route everything to index.html
. Regarding your original issue with the nginx server that should've routed everything to index.html I'm not sure why that did not work. I would assume the server was not set up to route everything to index.html as you may have thought but I could be wrong
from angular2-login-seed.
I'll try the nginx routing again.
Thanks for the help!
from angular2-login-seed.
Related Issues (20)
- After login, where do you store the session token? HOT 3
- Update to rc5 HOT 2
- Update to Angular2 latest release HOT 10
- demo doesnt run HOT 4
- Host Parameter HOT 2
- Custom Express Server setup should mention the 'apiBase' variable HOT 6
- Access-Control-Allow-Origin
- doesn't work on IOS HOT 4
- What about facebook? HOT 1
- Question: Router hack on the client side HOT 4
- The angular2-login-seed.herokuapp.com page isnβt working HOT 1
- Unable to register: "User already exists" HOT 3
- Why deprecated HOT 2
- In the Demo Logging in is not working HOT 1
- [Maintainer Wanted] HOT 9
- Maintainer Wanted HOT 4
- Local Express server tries to serve old version of front end on request of the root /
- Service base API variables need to be constant
- npm ERR! peerinvalid Peer HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2-login-seed.