Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

(Question) returning existing angular frontend #325

Closed
patrickdronk opened this issue Nov 1, 2016 · 5 comments
Closed

(Question) returning existing angular frontend #325

patrickdronk opened this issue Nov 1, 2016 · 5 comments

Comments

@patrickdronk
Copy link

Hi, I would like to start using this framework for a small project im working on. I already have an angular frontend. I want to serve this angular app from pippo on the base url e.g.
GET("/", (routeContext) -> routeContext.send("index.html")); (with the js and css files)

I've looked at the documentation but I don't seem to understand.
Can someone help me?

Thanks in advance
@patrickdronk patrickdronk changed the title (Question) (Question) returning existing angular frontend Nov 1, 2016
@decebals
Copy link
Member

decebals commented Nov 1, 2016

Take a look at angular integration demo [1]. If you don't understand leave a comment

[1] https://github.com/decebals/pippo-demo/tree/master/pippo-demo-crudng

@patrickdronk
Copy link
Author

patrickdronk commented Nov 2, 2016 •
edited
Loading

Thanks for your answer!

I looked at the demo. But the angular app in that demo is not what im looking for. I don't want to use the template language and angular at the same time and render it server side, I just want it to serve a single html file with all it's dependencies (js & css) without having to use webjarsAt etc.

@decebals
Copy link
Member

decebals commented Nov 2, 2016

First step is to take a look at Static files [1] section from documentation.
The approach with webJarsAt is optional of course. You can use the classic approach with put all static artifacts in a folder (default the folder is public) and split these artifacts in folders: css and js.

➤ tree src/main/resources/public
src/main/resources/public
├── css
│ └── style.css
├── fonts
└── js
└── app.js

Then in your Application (for example in onInit method) or directly from Pippo you must "mount" the "public" folder with the call of method addPublicResourceRoute.

After this, if you don't want to use the publicAt directive (and implicit a template engine in your project) you must check if your resource is seen by Pippo as public resource.

So, variant with publicAt:

<head>
    <link href="${publicAt('css/style.css')}" rel="stylesheet">
</head>

Variant without publicAt:

<head>
    <link href="public/css/style.css" rel="stylesheet">
</head>

Now it's time to serve your static html. A possible solution can be:

// send 'public/welcome.html' as response
GET("/", (routeContext) -> {
    try {
        String html = IoUtils.toString(getClass().getResourceAsStream("/public/welcome.html"));
        routeContext.send(html);
    } catch (IOException e) {
        throw new PippoRuntimeException(e);
    }
});

It's also possible to serve static file without "/public" prefix in the URL request. For this, instead of

addPublicResourceRoute()

you must use

addPublicResourceRoute("/")

If you need to serve only some artifact types( for example css and js) from root ("/") and the rest from public ("/public") please read [2].
Pippo is very versatile, you have the freedom to chose your way to resolve a specific problem.

Did what I say make sense for you?

[1] http://www.pippo.ro/doc/static-files.html
[2] https://groups.google.com/d/msg/pippo-java/P9XlmtrmaxA/h7ttPxltAwAJ

@patrickdronk
Copy link
Author

This does answer my question!

Thank you very much!

@decebals
Copy link
Member

decebals commented Nov 3, 2016

You are welcome!

@decebals decebals closed this as completed Nov 3, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@decebals @patrickdronk