# Configuring CLI for a existing web server

**URL:** <https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043>\
**Category:** Help Requests\
**Created:** [December 20, 2018, 6:52pm UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043 "2018-12-20T18:52:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![patrickwaltersc21](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/patrickwaltersc21/32/9_2.png) [@patrickwaltersc21](https://discourse.aurelia.io/u/patrickwaltersc21)\
**Post date:** [December 20, 2018, 6:52pm UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043/1 "2018-12-20T18:52:30Z")

</div>

Hey I have several legacy JSPM projects and have considered moving them to the new CLI. Are there any articles or information about configuring the CLI generated webpack projects to be served from an external html page?

For instance if I have a Rails application that serves an app with CSRF tokens and all the goodies and want to load the JavaScript as an app within the page without having the index.html modified in any way.

Thanks in advance,

Patrick

---

<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:** [December 20, 2018, 8:42pm UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043/2 "2018-12-20T20:42:43Z")

</div>

I don’t know webpack, but I have a setup in cli+requirejs that uses http-proxy-middleware to hook up a backend. It might be useful to your use case.

> <https://stackoverflow.com/questions/51182109/setup-to-develop-aurelia-using-systemjs-and-transpile-ts-files-on-browser/51182721#51182721>

---

<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:** [December 20, 2018, 8:50pm UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043/3 "2018-12-20T20:50:28Z")

</div>

Beware of Rails, you need to reload CRRF token. For security reason, rails regenerates the token when user login/logout.

I have used a fix here before with jquery ajax, it should be very similar if to use fetch api. It basically reload the token without reloading the whole page, then uses the token manually on next request header.

> <https://stackoverflow.com/questions/11845500/rails-devise-authentication-csrf-issue>

Update: just checked my code, I was using Sija’s snippet.

---

<div class="post-metadata">

**Author:** ![patrickwaltersc21](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/patrickwaltersc21/32/9_2.png) [@patrickwaltersc21](https://discourse.aurelia.io/u/patrickwaltersc21)\
**Post date:** [December 20, 2018, 9:49pm UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043/4 "2018-12-20T21:49:59Z")

</div>

Yeah I have the CSRF token reload already done (the application was has been around for about two years) just need to figure out how to get a CLI project building so it can be included. I’ll look at the require.js setup you have.

The CLI with Webpack in particular seems to generate an index.html on the fly.

---

<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:** [December 20, 2018, 10:45pm UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043/5 "2018-12-20T22:45:43Z")

</div>

> **[jantimon/html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)**
>
> Simplifies creation of HTML files to serve your webpack bundles - jantimon/html-webpack-plugin

---

<div class="post-metadata">

**Author:** ![patrickwaltersc21](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/patrickwaltersc21/32/9_2.png) [@patrickwaltersc21](https://discourse.aurelia.io/u/patrickwaltersc21)\
**Post date:** [December 21, 2018, 7:04pm UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043/6 "2018-12-21T19:04:42Z")

</div>

So it sounds like no one has gone down the path before with webpack, I don’t want to be the first so I’ll research the other CLI options instead.

Thanks again for the help!

---

<div class="post-metadata">

**Author:** ![patrickwaltersc21](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/patrickwaltersc21/32/9_2.png) [@patrickwaltersc21](https://discourse.aurelia.io/u/patrickwaltersc21)\
**Post date:** [December 23, 2018, 5:36pm UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043/7 "2018-12-23T17:36:51Z")

</div>

So as a final wrap-up here the issue with Webpack looked like too large a task to take on so instead I tried to get the CLI configured to both output in to a sub-directory as well set up a base URL for the system.js config.js file.

Since Rails serves out of a directory called `public` that does not actually exist in the path when requesting I could not find a combination of options to handle this, so instead I’m building to a directory minus public (ex. `scripts`) and then using the `copyFiles` directive to copy them to the `public/scripts/` directory. The problem here is that `copyFiles` happens _before_ the build as best I can tell so the files are always 1 iteration behind. But it’s better than nothing!

---

<div class="post-metadata">

**Author:** ![ajoslin103](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ajoslin103/32/281_2.png) [@ajoslin103](https://discourse.aurelia.io/u/ajoslin103)\
**Post date:** [May 25, 2019, 4:12pm UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043/8 "2019-05-25T16:12:09Z")

</div>

I had the same problem serving an AdonisJS [backend] app with an Aurelia [frontend]

The deploy was to Heroku which reloads when I push to it’s single repo

So,

I fill the backend app’s …/public folder with the frontend app, commit the changes and push.

I do it with a script that runs outside the backend & frontend folders – it has an option to rebuild the frontend or not, because sometimes I only change the backend.

```
#!/bin/bash

frontendDir="<frontend-app-dir-name>"
backendDir="<backend-app-name>"

remoteApp="$1"
if [-z "${remoteApp}"] ; then
  echo "usage: $0 [staging | production]"
  exit 1
fi
if ["${remoteApp}" != "staging" -a "${remoteApp}" != "production"] ; then
  echo "usage: $0 [staging | production]"
  exit 1
fi

cd ${backendDir}
if [! -z "$(git status | grep 'not staged')"] ; then
	echo "cannot continue, you have unstaged files in: ${backendDir}"
	exit 1
fi
if [! -z "$(git status | grep 'to be committed')"] ; then
	echo "cannot continue, you have uncommitted files in: ${backendDir}"
	exit 1
fi
cd - > /dev/null

cd ${frontendDir}
if [! -z "$(git status | grep 'not staged')"] ; then
	echo "cannot continue, you have unstaged files in: ${frontendDir}"
	exit 1
fi
if [! -z "$(git status | grep 'to be committed')"] ; then
	echo "cannot continue, you have uncommitted files in: ${frontendDir}"
	exit 1
fi
cd - > /dev/null

echo -n "Do you want to re-build the dist folder for the GUI? [Y/n] "
read confirm
date

if [[${confirm:0:1} != "n" && ${confirm:0:1} != "N"]] ; then

	echo "re-building the GUI [${frontendDir}]"
	cd ${frontendDir}
	au build --env prod
	result=$?
	cd - > /dev/null
	echo "finished re-building the GUI [${frontendDir}]"

	if [${result} -ne 0] ; then
		echo "there was a problem with building the GUI [${frontendDir}]"
		exit ${result}
	else

		cd ${backendDir}
		../extractGitInfo.sh
		cd - > /dev/null

		cd ${frontendDir}
		../extractGitInfo.sh
		cd - > /dev/null

		echo "copying the fresh GUI [${frontendDir}] into the backend [${backendDir}] public folder"
		rm -f ${backendDir}/public/*
		cp -r ${frontendDir}/dist/* ${backendDir}/public/.
		echo "copied the fresh GUI [${frontendDir}] into the backend [${backendDir}] public folder"

		cp ${frontendDir}/git* ${backendDir}/public/.
		echo "copied the GUI [${frontendDir}] version data into the backend [${backendDir}] public folder"
		date

		cd ${backendDir}
		echo "adding and committing public folder to the backend [${backendDir}] public folder"
		git add public # to capture new files
		git commit -am "rebuilt GUI into ${backendDir}/public before push to heroku"
		cd - > /dev/null

	fi

fi

cd ${backendDir}
branch=$(git branch | grep \* | cut -d\ -f2- | sed 's|feature/||')
echo "pushing changes from the current branch [${branch}] to the master branch at Heroku"
git push ${remoteApp} ${branch}:master

cd - > /dev/null

date

# finished
```

---

<div class="post-metadata">

**Author:** ![ajoslin103](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ajoslin103/32/281_2.png) [@ajoslin103](https://discourse.aurelia.io/u/ajoslin103)\
**Post date:** [June 1, 2019, 11:48am UTC](https://discourse.aurelia.io/t/configuring-cli-for-a-existing-web-server/2043/9 "2019-06-01T11:48:58Z")

</div>

Also, here is my script [extractGitInfo.sh] to pull out the repo information so that I can pull it into the frontend for display

```
#!/bin/bash

# http://ftp.rpm.org/max-rpm/ch-rpm-file-format.html

revisioncount=$(git rev-list HEAD | wc -l | awk '{printf("%04d\n", $1)}')
projectversion=$(git tag | tail -1)
gkHash=$(git rev-parse --short=6 HEAD)
fullHash=$(git rev-parse HEAD)

branch=$(git branch | grep \* | cut -d\ -f2- | sed 's|feature/||')

rpmVers=$(echo "${branch}-${revisioncount}-r${gkHash}" | sed 's/-/_/g')

echo "${rpmVers}" > gitVers.txt

jsVers=$(cat <<EOF
export default {
    rpmVers: '${rpmVers}',
    branch: '${branch}',
    hash: '${fullHash}',
    gkHash: 'r${gkHash}',
    rev: '${revisioncount}',
};
EOF
)

echo "${jsVers}" > gitVers.js

```

# 

Most times I deliver software via .rpm’s so I build a the version fragment here and use it elsewhere – this is an example of an output file from this script:

```
export default {
    rpmVers: 'master_0095_r4c14b7',
    branch: 'master',
    hash: '4c14b75244ba44c960d04d4e60beacfd0a5ac326',
    gkHash: 'r4c14b7',
    rev: '0095',
};
```