0

Working on an app that has a Rails 5.0 API backend, and an Angular2 front-end, but the Angular app is so large, I can't have it load whenever someone lands on the app's home page (/) since the homepage is just information about the app and a call-to-action to sign-up.

Is there a way to have the frontpage (/), sign-up page (/sign-up), and sign-in page (/sign-in) be static HTML so they load fast, and the angular app doesn't load immediately, then, once the user has signed up or signed in, they are redirected to the Angular app?

I'm wondering where do I put the static pages? In the /public folder of the rails API, or is there a place in the Angular app where I can store a static page like this, without the whole Angular app loading when you go to that page?

7
  • I'm not sure why u decide to use Rails and Angular together.. U can use easily Rails for Static, Login, Register, BackEnd (for everything).. What's ur usage for using both? Commented Sep 29, 2016 at 21:10
  • @LiborZahrádka The Angular frontend is much faster, once it has loaded. ;) Commented Sep 29, 2016 at 21:41
  • I can easily build Rails front-end website with less than 0.5s load speed.. It depends what u're using (large images, unnecessary JS) Commented Sep 29, 2016 at 21:42
  • @LiborZahrádka I figured out I could use the proxy config for my Angular app. :D Commented Sep 29, 2016 at 22:12
  • Too complitated for that �?� Commented Sep 29, 2016 at 22:22

2 Answers 2

0

Yes it is possible.

Create controllers for APIs, Angular and also StaticPages controller.

Static pages controller should have methods like home, sign-up, sign-in and their routes & views pairs,

Then create controllers for APIs and controller with method for Angular views.

Sign up to request clarification or add additional context in comments.

9 Comments

Interesting! I never thought of using a controller to serve a static page. Is that slower than putting a static page in "/public" ?
@Bago I think that is standard approach. Even if you serve pure HTML pages, it is normal to create controller for static pages and add methods for each page because that way you can easier manipulate routes and add some ruby (erb) code inside if it will be needed in the future. That is described in Michael Hartl's book (railstutorial.org) for Rails 4 which is accepted as standard guide for Rails. Now I can't really tell if it is faster or not, but the difference in load speed is unnoticeable.
After a lot of researching, I think I have to switch my whole setup around, so that rails is the app that is reached first. Right now I have Angular as the "main" app, and it makes it impossible to serve a static file on "/" without loading the Angular app entirely.
Yes wrap Angular inside Rails rather than vice versa or saparately
I can't find any examples of this. It's really hard to google... LOL Every example I see loads the angular app right away. Doesn't seem very practical in the real world. Last time I checked, my Angular app was 3.2MB........
|
0

If I were you I'd probably try moving the current src/index.html to src/something-else.html and then make src/index.html static.

I don't know if Angular CLI/Webpack will automatically pick up your src/something-else.html and put it into dist (where Rails' public directory is probably symlinked to), but in any case, that's what I'd try to make happen.

9 Comments

I actually, got rid of the symlink, and put back the public folder, and it still loads the Angular app on "/". I'm trying to figure out how to load the angular app on /#/ because I want "/" to be static. changing base href has no effect.
Actually, if I could serve the app on "/dashboard" that would be fine too. For some reason I can't find where in the config to set this.
OK I figured one thing out. I had a proxy config problem. Now I can get the app to run on "/app" but what is still happening is if you land on "/", the angular app loads, and redirects you to "/app". So I guess this is more of a rails question. How do I get rails to handle "/" on its own instead of passing the request on to the Angular app?
I'm guessing I need to hide the static "/" page inside the angular app?
I would keep the symlink and change client/src/index.html into a static HTML file that doesn't reference Angular at all. That's equivalent to having a static public/index.html (as long as you can get Webpack to copy index.html into dist for you, which I'm sure you can).
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.