jjjonesjr33
commented
3 years ago Found an easy workaround that works for analytics and sorting, takes a few steps but then you can do whatever. FYI you'll need to know a bit of HTML and docker pathing.
1) Setup the docker once using the default docker-compose.yml and your options so you can launch the container/webpage. 2) Inspect the page and copy the entire index.html to a notepad < You'll need this in a min. 3) Edit the container by adding the following paths in 3-1 and 3-2 <<< you may have to delete the container and then re-added it, but this time only add the paths. No need to add any of the variables. 4) In App.js you will need to remove some code or each time you restart your container it will reset to the default template. Examples on what code needs to be removed in 4-1 or the just copy and paste the code exactly from 4-2 5) Run the container, set up a reverse proxy with SSL and point it to port HTTP://127.0.0.1:3000 and enjoy 😄 (Replace the 127.0.0.1 with your own IP of the host machine of the docker)
3-1) The first one is a path for the index.html
Container Path: /usr/src/app/www/index.html Host Path: /mnt/user/appdata/littlelink/index.html <<< This was mine your's may be different on where you would like to store this file.
Keep in mind in the folder that you are linking the container to you need to create the index.html file or the container will fail to start. (you can just do this with notepad and then save the file as index.html)
Once you have access to the index.html you pretty much can do whatever you want. For example, adding an analytics script, moving the links to the right spot, or even adding a background and changing the color can be easily done.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-00000000000"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-00000000000');
</script>
3-2) Next is the App.js
Container Path: /usr/src/app/app.js Host Path: /mnt/user/appdata/littlelink/app.js <<< This was mine your's may be different on where you would like to store this file.
Keep in mind in the folder that you are linking the container to you need to create the app.js file or the container will fail to start. (you can just do this with notepad and then save the file as app.js)
4-1) Fix App.js you may need to remove the following
fs.readFile('./template/index.html', 'utf8', (err, file) => {
if (err) {
throw err;
}
const { JSDOM } = jsdom
const dom = new JSDOM(file);
const html = "<!DOCTYPE html>\n" + useEnv(dom.window.document).documentElement.outerHTML;
fs.writeFile('./www/index.html', html, 'utf8', (err) => {
if (err) {
throw err;
}
});
});4-2) If the app.js file is empty the default code is
const express = require('express')
const morgan = require('morgan')
const compression = require('compression')
const fs = require('fs')
const jsdom = require('jsdom')
const useEnv = require('./env')
const app = express();
app.use(morgan('combined'));
app.use(express.static('www'));
app.use(compression())
const server = app.listen(process.env.PORT || 3000, () => {
const host = server.address().address
const port = server.address().port
console.log('Express app listening at http://%s:%s', host, port)
})ENJOY
That's pretty much it, once you have access to the index.html it's fair game on everything that you could or would want to edit or change for the main structure of the page. You could add the css folder as well if you want to customize the styles, but overall this is a quick and dirty way to gain access. If you want to check out what I've done you can do it at https://jjjonesjr33.com/
timothystewart6
northportio
Would be nice to opt in to Google Analytics