Closed bmperrea closed 7 years ago
I'm also curious what kinds of path replacements you are doing in the cli, and where they are in the code. :)
I believe if you ran npm start
you need to open the server URL. http://localhost:8102
the only path replacements the CLI does it for the app name. you can configure a different port by using the PORT env variable. makes sense?
Interesting. I was thinking that the javascript index.js would be talking to the server at 8102 on its own. When I actually distribute it the index.html file is the endpoint for the user - correct?
Perhaps I was confused. Here's what's at that address though:
The way we have structured it initially is that you need a production server to serve even static content. If you want to test it without it, you can open your index.html
and remove the forward slash from the static assets:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>Grommet</title>
<meta name="description" content="" />
<meta name="fragment" content="!" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" type="image/png" href="img/shortcut-icon.png" />
<link rel="apple-touch-icon" sizes="196x196" type="image/png" href="img/mobile-app-icon.png">
<link rel="stylesheet" type="text/css" href="index.css">
<style>
body.loading {margin: 0px; width: 100vw; height: 100vh;
background-image: radial-gradient(circle at 50% 15%, #fff, #fff 30%, #ccc);
}
body.loading #content {
position: relative;
width: 100%;
height: 100%;
font-size: 0px;
}
body.loading #logo {
position: absolute; display: block; width: 140px; height: 140px;
top: calc(50vh - 70px); left: calc(50vw - 70px);
}
div.t {
display: inline-block;
box-sizing: border-box;
margin: 0px;
width: 10vw;
height: 10vh;
background-color: #e2e2e2;
}
div.t.on {
-webkit-animation: pulse 3s infinite linear alternate;
-moz-animation: pulse 3s infinite linear alternate;
animation: pulse 3s infinite linear alternate;
}
div.t.on:hover {
-webkit-animation: none;
background-color: #ccc;
}
@-webkit-keyframes pulse {
100% { background-color: #fff; }
}
@-moz-keyframes pulse {
100% { background-color: #fff; }
}
@keyframes pulse {
100% { background-color: #fff; }
</style>
</head>
<body class="loading">
<div id="content" tabindex="-1" style="outline: none;">
<svg id="logo" viewBox="0 0 182 182" version="1.1" role="img">
<path role="presentation"
d="M 91,91 m 0,-82 a 82,82 0 1,1 0,164 a 82,82 0 1,1 0,-164"
stroke-width="18" stroke="#865CD6" fill="none"></path>
</svg>
<script>
var c = document.getElementById("content");
for (var i = 0; i < 100; i += 1) {
c.insertAdjacentHTML('beforeend', '<div class="t off"></div>');
}
var timer = setInterval(function () {
var again = false;
if (document.body.classList.contains('loading')) {
var ts = c.querySelectorAll('div.t.off');
if (ts.length > 0) {
var index = Math.floor(Math.random() * ts.length);
ts[index].classList.remove('off');
ts[index].classList.add('on');
if (ts.length > 1) {
again = true;
}
}
}
if (! again) {
clearInterval(timer);
}
}, 100)
</script>
</div>
<script async src="index.js"></script>
</body>
</html>
I'm still unsure why you still getting the error with the hot module replacement. I'm investigating it now.
Awesome - thanks @alansouzati . I can confirm that the above index.html reproduces what I saw when directly pulling from the server.
cool. i got it as well. let me fix it!
On another note - the reason I got into this was that I ran into trouble with gulp dist
showing up completely empty after gulp dev
worked great when using the grommet-toolbox. The reason I was afraid to dig into this is that nothing gave any errors - the distribution version was just completely blank only after I switched from direct state control to using redux and react-router. This was a completely static webapp in that case, and I really wanted to get a dev environment where the dist was working. :)
So, question - do you want to upkeep grommet-toolbox, or if the cli is working then just send people to that?
Yeah, the grommet-toolbox is now deprecated. I believe the new Get Started page already redirects people to the new CLI instead of toolbox.
I was able to fix this problem by setting NODE_ENV=production to the dist script.
"scripts": {
"test": "grommet check",
"dev-server": "nodemon ./server/dev",
"dev": "cross-env NODE_ENV=development grommet pack",
"dist": "cross-env NODE_ENV=production grommet pack",
"dist-server": "babel -d ./dist-server ./server -s",
"start": "npm run dist-server && npm run dist && node ./dist-server/server.js"
}
I thought the default babel NODE_ENV would be production
but it turns out to be development.
Yay!
Dear @alansouzati , as a point of feedback it would be nice (for me) to setup a full redux + react-router type of app that is hosted statically. one perspective is that this could be another nice boilerplate for the cli.
For now, I tried changing index.html as you suggested, now with the npm start
version working and here is what I get. If you had any ideas of what is going on, or how easy it would be to make the full app into a static one that would be great!
I would start with the docs
template. Webpack config is quite different for this scenario (I use the static-site-generator-webpack-plugin).
I could see this as an interesting template, maybe you can share your final outcome with us once you've finished?
This error is coming from src/js/api/tasks
where we try to read the host information for the websocket connection. You would need to change that to point to your endpoint.
I wonder where you are going to deploy this and the security implications of this. Specially around CORS (cross origin resource sharing).
Yes, I'll be happy to share. Your point about security being a good reason to use a server site is a good one. Actually, it looks like I just wanted to add redux to the docs
template, which shouldn't be very hard, so I think starting with docs
it should be no problem.
I assume the path names are being generated incorrectly