Link proper css file

[jorissteyn]

Hi Tim,

thanks for taking time to share your trouble installing Stepup-tiqr. I believe the actual problem is in the documentation. The global.css file should be compiled automatically when installing the project. This is how it should look:

What you're proposing is including only the vanilla bootstrap stylesheets without the project-specific rules:

The README.md omits the required dependencies for compiling frontend-assets, I guess that's part of the problem. The actual commands for compiling assets are wrapped inside composer scripts (in composer.json) which make it less transparent how it works.

This is what you should do:

• install nodejs/npm (I'll add this to the README)
• install yarn (npm install --global yarn) (I'll add this to the README)
• run composer install
• run composer encore dev or composer encore prod

If you don't like using composer to generate the assets, this is what happens behind the scenes:

• yarn install (this happens as post-install hook when running composer install)
• ./node_modules/.bin/encore dev or ./node_modules/.bin/encore prod (composer encore is simply a proxy to ./node_modules/.bin/encore)

I don't think this is ideal, but does this work for you? Do let us know if this doesn't fit your workflow!

Any ideas on how to make this easier is appreciated, personally, I think it would be very convenient to simply consider the frontend-tooling "for developers" and commit global.css to git.

[tvdijen]

Thanks! I'll get back to this after testing.. The composer encore-step is probably the missing link here.. It's not mentioned in the playbook either

[tvdijen]

That was indeed the missing link.. Thanks!

[tvdijen]

Having a similar issue with selfservice... Could you help me with the right procedure?

[pmeulen]

Have a look at the installation procedures. There are two:

1. Deploy from source in a development setting

   For each component you can find the procedure to install the component from soucre in a development setting in the setup-* Ansible roles at https://github.com/OpenConext/Stepup-Deploy/tree/feature/dev-vm/roles

   For installation from source "develop" is true. note that the stepup-* roles include https://github.com/OpenConext/Stepup-Deploy/blob/feature/dev-vm/roles/deploy/tasks/main.yml

2. Deploy from prebuild tarballs in a production setting:

   For production the stepup components are deployed from tarballs that are build using https://github.com/OpenConext/Stepup-Build/blob/master/stepup-build2.sh, these are then deployed using the above deploy roles, but with "develop" set to false

   We know that these two methods work, because both are used regularly. Of course the instructions in the readme's of the individual components should be complete and up to date as well

[tvdijen]

I must be doing something horribly wrong then, because when deploying from tarball (latest Github-release) I see this:

.. and I'm pretty sure that's not what it's supposed to look like

[pmeulen]

No this should not look like this :) Looks like the CSS is not being applied. Because I see the openconext logo in your screenshot, the web directory seems accesible. Can you see if the css there, and the webserver can accces them?

For a recent Stepup-SelfService the web directory should look like this:

$ find ./web -maxdepth 2
./web
./web/apple-touch-icon.png
./web/css
./web/css/bab9907.css
./web/css/b2c9363.css
./web/images
./web/images/second-factor
./web/images/header-logo.png
./web/robots.txt
./web/js
./web/js/440d5cd.js
./web/js/193f3f6.js
./web/js/8ac6f20.js
./web/js/fea62fd.js
./web/favicon.ico
./web/app.php
./web/fonts
./web/fonts/fontawesome-webfont.ttf
./web/fonts/FontAwesome.otf
./web/fonts/fontawesome-webfont.woff
./web/fonts/fontawesome-webfont.eot
./web/fonts/fontawesome-webfont.svg
./web/bundles
./web/bundles/surfnetstepup
./web/bundles/mopabootstrap
./web/bundles/surfnetstepupu2f
./web/bundles/jmstranslation
./web/bundles/surfnetstepupselfserviceselfservice
./web/bundles/framework

If this doen't work for you, let's continue the discusstion openconext mailinglist, or open an issue in OpenConext/Stepup-SelfService, because this is not related to Stepup-tiqr

[tvdijen]

I don't know what happened, but I've started over from scratch and now it works..