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
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.
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.
Update: just checked my code, I was using Sija’s snippet.
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.
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!
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!
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
# finishedAlso, 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',
};