# Use login app in external HTML pages¶

This documentation focuses on login and how it can be used in external HTML pages.

### 1. Install Chaise¶

Make sure Chaise is properly installed. The next steps (and login app) are assuming that Chaise is installed and deployed on the server. For more information about how to install Chaise please refer to installation document.

### 2. Include Chaise dependencies¶

You need to include login.app.js that is part of Chaise in your HTML page. The rest of dependencies will be dynamically fetched by login.app.js. Since this might drastically affect the performance, we suggest doing the next steps to prefetch them.

<head>


#### 2.1. Prefetch Chaise dependencies (optional)¶

Login app has more dependencies that, if not included, are fetched dynamically. Hence it’s highly recommended that you prefetch these dependencies. To make it simpler, during installation, Chaise creates the list of dependencies in the dist/chaise-dependencies.html file. So you need to include the contents of this file in your HTML.

<head>
<!-- TODO add the contents of dist/chaise-dependencies.html here -->


The position of where you’re adding these include statements is very important. It HAS TO be BEFORE login.app.js. Adding them after login.app.js defeats the purpose of prefetching and actually causes duplicated fetching.

You should not copy the contents of dist/chaise-dependencies.html manually and this should be part of the automated process of building Chaise and your other apps (Since the list generation is controlled by Chaise, we might update the list and therefore you should make sure you’re always getting the latest list of dependencies.)

If you’re using Jekyll, the following are the steps on how you can achieve this:

1. Make sure make dist and make deploy is done in Chaise.
• This will create the dist folder in your specified build target (by default it’s /var/www/html/chaise).
• It will also generate the dist/chaise-dependencies.html.
1. Copy the dist/chaise-dependencies.html file into your _includes folder.
• As it was mentioned, this MUST be part of your automated build process that is responsible for building Chaise, and should not be done manually.
• _includes folder is specific to Jekyll. You should be able to find it in the root location of your Jekyll website repository.
1. Include the file using %include statement:

<head>
{% include chaise-dependencies.html %}

1. Build your Jekyll site as you normally would (using jekyll build or jekyll serve commands.)
• As you most probably might know, this MUST be part of your automated build process, and should not be done manually. You just have to make sure that copying of chaise-dependencies.html is done prior to rebuilding the Jekyll site.

#### 2.2. Prefetch custom styles (optional)¶

If you define customCSS property in your chaise-config, Chaise will fetch it during the runtime. To increase the performance, you can prefetch this file by including it in your HTML file. So

<head>
<!-- TODO include your customCSS file here -->
<!-- TODO add the contents of dist/chaise-dependencies.html here -->


If you want to prefetch it, the include statement MUST be added before the content of dist/chaise-dependencies.html .

After installing Chaise and including the dependencies, you can now use login by including the directive in your HTML:

<body>
</body>


## Sample HTML page¶

If you want to look at a sample HTML page, you can take a look at sample-login.html file in Chaise.