# Moving the location of the root app component from src/ with Webpack

**URL:** <https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306>\
**Category:** Help Requests\
**Created:** [March 17, 2020, 3:30pm UTC](https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306 "2020-03-17T15:30:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidlav](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidlav/32/895_2.png) [@davidlav](https://discourse.aurelia.io/u/davidlav)\
**Post date:** [March 17, 2020, 3:30pm UTC](https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306/1 "2020-03-17T15:30:51Z")

</div>

I’m trying to figure out how to bootstrap Aurelia with the following file locations:

src/client/main.ts  
src/client/aurelia/app.ts  
src/client/aurelia/app.html

I got Webpack to find main.ts with:

`new AureliaPlugin({ aureliaApp: 'client/main' })`

Then in `main.ts` I have:

`aurelia.setRoot(PLATFORM.moduleName('client/aurelia/app'))`

which makes Webpack happy and it technically compiles. However, when I go to the browser, I get:

```auto
Error: Unable to find module with ID: app
at WebpackLoader.eval (aurelia-loader-webpack.js:187)
at step (aurelia-loader-webpack.js:48)
at Object.eval [as next] (aurelia-loader-webpack.js:29)
at eval (aurelia-loader-webpack.js:23)
at new Promise (<anonymous>)
at __awaiter (aurelia-loader-webpack.js:19)
at WebpackLoader._import (aurelia-loader-webpack.js:154)
at WebpackLoader.eval (aurelia-loader-webpack.js:252)
at step (aurelia-loader-webpack.js:48)
at Object.eval [as next] (aurelia-loader-webpack.js:29)
```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 17, 2020, 9:49pm UTC](https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306/2 "2020-03-17T21:49:25Z")

</div>

Did you update `index.ejs`?

```auto
<body aurelia-app="client/main">

```

---

<div class="post-metadata">

**Author:** ![davidlav](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidlav/32/895_2.png) [@davidlav](https://discourse.aurelia.io/u/davidlav)\
**Post date:** [March 18, 2020, 4:38pm UTC](https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306/3 "2020-03-18T16:38:10Z")

</div>

That did it, thanks!!

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 19, 2020, 4:17am UTC](https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306/4 "2020-03-19T04:17:16Z")

</div>

It’s against common sense.  
If I set `aureliaApp: 'client/main'` in AureliaPlugin, I would expect this explicit config should be used regardless what’s in html template.

It doesn’t make much sense to ask user to set same config in two places. I consider this is a bug in our aurelia-webpack-plugin.

**Update** : not a webpack-plugin bug, but rather a limitation. The aurelia-bootstrapper only reads DOM to find out aurelia-app (or data-aurelia-app) attribute, there is no other API provided for webpack-plugin to fix the entry module.

~~For slightly better config in current situation, remove aureliaApp from your AureliaPlugin config. The attribute in html body is sufficient. `<body aurelia-app="client/main">`~~ wrong suggestion. (I was running watch mode)

---

<div class="post-metadata">

**Author:** ![davidlav](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidlav/32/895_2.png) [@davidlav](https://discourse.aurelia.io/u/davidlav)\
**Post date:** [March 19, 2020, 3:12pm UTC](https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306/5 "2020-03-19T15:12:18Z")

</div>

I completely agree. And I think that’s why it confused me for so long because, just like you said, I figured that if I set the location `aureliaApp: 'client/main'` in the AureliaPlugin, that that would override whatever’s in the HTML.

And just like you said and then retracted, I tried removing that line from my webpack config after I added it to the HTML, but that broke it again. So it definitely does need to be in both places.

So far as I can tell there’s nothing in the official documentation that tells you how to do this, which I find surprising since it can’t be that uncommon of a scenario.

---

<div class="post-metadata">

**Author:** ![Kremnari](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/kremnari/32/2177_2.png) [@Kremnari](https://discourse.aurelia.io/u/Kremnari)\
**Post date:** [May 14, 2020, 12:14am UTC](https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306/6 "2020-05-14T00:14:13Z")

</div>

Late to the party (was looking for something else)

I’m curious @davidlav, are you moving your main.ts to coincide with what your production environment will be? If so, you could just change the “baseUrl” const in webpack.config.js

Kremnari

---

<div class="post-metadata">

**Author:** ![davidlav](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidlav/32/895_2.png) [@davidlav](https://discourse.aurelia.io/u/davidlav)\
**Post date:** [May 14, 2020, 2:31am UTC](https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306/7 "2020-05-14T02:31:25Z")

</div>

It was part of migrating an already existing jQuery/Handlebars application over to Aurelia and I initially wanted to keep the folder structure as original as I could.

I could be totally wrong, but isn’t `baseURL` more for resolving a route or URL than for telling Webpack where to find the source files? Like if I were hosting the application on GitHub pages and it was at the URL [user.github.com/project-name](http://user.github.com/project-name), then my `baseURL` would be `project-name`, not `client`.

At any rate, we ultimately solved it by changing `module.exports.resolve.modules` from `[path.resolve(__dirname, 'src'), 'node_modules']` to `[path.resolve(__dirname, 'src/client'), 'node_modules']`.

---

<div class="post-metadata">

**Author:** ![Kremnari](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/kremnari/32/2177_2.png) [@Kremnari](https://discourse.aurelia.io/u/Kremnari)\
**Post date:** [May 14, 2020, 3:35am UTC](https://discourse.aurelia.io/t/moving-the-location-of-the-root-app-component-from-src-with-webpack/3306/8 "2020-05-14T03:35:26Z")

</div>

You are of course correct, a trick I found out about myself when setting my dist folder directly into my dev server.

I was just curious about the why of your folder structure, which you answered.

Keep on coding!