search

grommet / grommet-cli

Deprecated, use create-react-app for v2 instead. Command Line interface for grommet
Apache License 2.0
28 stars 18 forks source link

path names not working in distribution version #16

Closed bmperrea closed 7 years ago

bmperrea commented 7 years ago

I assume the path names are being generated incorrectly

dist

bmperrea commented 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. :)

alansouzati commented 7 years ago

I believe if you ran npm start you need to open the server URL. http://localhost:8102

alansouzati commented 7 years ago

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?

bmperrea commented 7 years ago

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: 8102

alansouzati commented 7 years ago

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>
alansouzati commented 7 years ago

I'm still unsure why you still getting the error with the hot module replacement. I'm investigating it now.

bmperrea commented 7 years ago

Awesome - thanks @alansouzati . I can confirm that the above index.html reproduces what I saw when directly pulling from the server.

alansouzati commented 7 years ago

cool. i got it as well. let me fix it!

bmperrea commented 7 years ago

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?

alansouzati commented 7 years ago

Yeah, the grommet-toolbox is now deprecated. I believe the new Get Started page already redirects people to the new CLI instead of toolbox.

alansouzati commented 7 years ago

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.

bmperrea commented 7 years ago

Yay!

bmperrea commented 7 years ago

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! socket

alansouzati commented 7 years ago

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?

alansouzati commented 7 years ago

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).

bmperrea commented 7 years ago

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.