From scope022 at gmail.com Tue Jan 31 09:57:16 2017
Content-Type: multipart/mixed; boundary="===============5619550879795512859=="
MIME-Version: 1.0
From: Brian Schofield <scope022 at gmail.com>
To: keycloak-user at lists.jboss.org
Subject: Re: [keycloak-user] Angular 2 with Webpack
Date: Tue, 31 Jan 2017 08:57:13 -0600
Message-ID: <CAO7ZPi_m=t+YGPC-bjsc9TWxeqY-Py1vw0Nwau+d=9kWthj-ZQ@mail.gmail.com>
In-Reply-To: FACD996F-E638-4C77-9C0D-7E3DF3D3448F@n-k.de

--===============5619550879795512859==
Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: quoted-printable

@Niko
I found it to be webpack being the primary issue.

In general webpack is exact definition of a bundler, in order for something
to get included in the bundle either
A: you need to have the appropriate loader
B: you need to have the appropriate plugin

If you're using webpack to build a distribution directory for your bundle
then you need to move your static assets into that distribution directory
as well because you don't want the name of your static assets to be changed
into some hash based bundle format.  Keycloak.js is looking for the exact
name keycloak.json, if you let it go through the bundling process by
requiring or importing keycloak.json then the output format in your bundle
will likely be something like this keycloak.[hash].*

For me I had to get keycloak.json to copy into the dist directory on
build.  The easiest way I found was to include the copy webpack plugin.
Here's my quick instructions to get it running:

*Within your package.json:*
npm install copy-webpack-plugin --savedev

*Within your webpack.config:*
    new CopyWebpackPlugin([{
      from: 'keycloak.json',
      to: 'keycloak.json'
    }])


Result on build: Moves keycloak.json renames to keycloak.json adds to dist
directory.

If you have any questions let me know.

On Tue, Jan 31, 2017 at 4:46 AM, Niko K=C3=B6bler <niko(a)n-k.de> wrote:

> I didn=E2=80=99t have the time to dive really into it, but what I observe=
d so long:
>
> - keycloak-js with React.js and plain JavaScript, bundled with Webpack 1
> works like a charm.
> - keycloak-js with Angular 2 and TypeScript, bundled with Webpack 2
> results in errors.
>
> So, the cause might be Webpack 2 or TypeScript=E2=80=A6.
> (I think it=E2=80=99s Typescript)
>
> My quick solution was to add keycloak-js with standard <script> tag in
> index.html.
> Other integration was to follow the example https://github.com/
> keycloak/keycloak/tree/master/examples/demo-template/angular2-product-app
> Works.
>
> - Niko
>
>
> Am 30.01.2017 um 21:53 schrieb Brian Schofield <scope022(a)gmail.com>:
>
> We figured out the issue.  Yes, the keycloak.json file was not in the
> appropriate directory.
>
> Webpack was not moving my static files into my distribution directory.
>
> We are currently getting prompt to login.  I've got a few more use cases I
> need to develop using keycloak, I will let you know if anything else pops
> up.
>
> -Brian
>
> On Mon, Jan 30, 2017 at 2:30 PM, ebondu <dev.ebondu(a)gmail.com> wrote:
>
> The keycloak.json looks to no be accessible from your browser, place it
> correctly in your project to make it accessible (my-app/src/public/ in my
> example)
>
>
> Brian Schofield wrote
>
> Do note that I am getting console out that says 'initializing Keycloak
> method' however it's seems that the request for the keycloak.json is
> returning html.
>
>
> Can you share the html result for the request to keycloak.json to confirm
> it
> is a 404 error page?
>
>
>
>
> --
> View this message in context: http://keycloak-user.88327.x6.
> nabble.com/keycloak-user-Angular-2-with-Webpack-tp2493p2530.html
> Sent from the keycloak-user mailing list archive at Nabble.com.
> _______________________________________________
> keycloak-user mailing list
> keycloak-user(a)lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/keycloak-user
>
>
>
>
> --
> Brian =C2=A7chofield
> _______________________________________________
> keycloak-user mailing list
> keycloak-user(a)lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/keycloak-user
>
>
>


-- =

Brian =C2=A7chofield

--===============5619550879795512859==--