Changing Aurelia app's index page

Question

I am working with an Aurelia app that should start at a different page than index.html, but I cannot find where to change that.

Where in an Aurelia app can you set which landing page to use?

Answer 1

This is misunderstanding. index.html page is the default landing page set by web server, not Aurelia. E.g. if you try to get the url e.g.https://stackoverflow.com the web server will give index.html by default. You need to change it in web server.

e.g. using Apache web server directive DirectoryIndex myindex.html

From https://httpd.apache.org/docs/2.4/mod/mod_dir.html:

The DirectoryIndex directive sets the list of resources to look for, when the client requests an index of the directory by specifying a / at the end of the directory name.

When using development server of Aurelia (default webpack-dev-server configured by aurelia-cli), the index.ejs compiles to index.html. You may need to change configuration of HtmlWebpackPlugin in webpack.config.js in order to change generated file from index.html to some other name:

 new HtmlWebpackPlugin({
  template: 'index.ejs',
  filename: 'myindex.html',
  ...

Answer 2

If you're using the CLI, there is not an easy way to do this. The CLI is mostly for basic use cases, and if you're trying to do something fancy, you're going to have to learn a bit more about JavaScript tooling.

You can still do it and here's how:

Open aurelia_project/tasks/run.js and make sure the server property of the argument to the browserSync function has the index property pointing at the index file you want to use, like this:

let serve = gulp.series(
  build,
  done => {
    browserSync({
      online: false,
      open: false,
      port: 9000,
      logLevel: 'silent',
      server: {
        index: 'my-special-index.html', // Make sure you have this line in there.
        baseDir: [project.platform.baseDir],
        middleware: [historyApiFallback(), function(req, res, next) {
          res.setHeader('Access-Control-Allow-Origin', '*');
          next();
        }]
      }
    }
);