gauravtiwari / webpacker-example-app

An example app to demonstrate webpacker with Rails 5.1
https://webpacker-example-app.herokuapp.com/
36 stars 11 forks source link

Having trouble getting app to render properly #3

Closed secondstreetmedia closed 7 years ago

secondstreetmedia commented 7 years ago

I followed the steps under "Running in development", and the terminal output says

webpack: Compiled successfully.

but this is what the page looks like:

image

No javascript counter or clock image. I'm using Mac OS Sierra. The only difference I know of is that I used Ruby 2.4.0.

Update: It appears to have something to do with the ~/public subdirectory, because there is a /packs subdirectory that exists within it that contains all of the files matching the file names you see in the rendered page screenshot. And when I use Chrome dev tools to inspect the page, I'm getting this in the Elements tab:

image

which shows a title of "listing directory", which obviously isn't correct. I removed the /packs subdirectory from the ~/public subdirectory because it's not in the repository code (although I noticed it is generated when I run yarn install in the terminal, so that's likely why it isn't in the repository code), but then the page just renders Cannot GET / and nothing else.

If it is not something I did, which it certainly could be, then it appears it could be a simple syntax typo somewhere, particularly an errant "/" or syntax around a "/", because that slash appears with the Cannot GET /, and if you look closely it also appears in the screenshot of the Chrome dev tools elements tab, where the title reads listing directory /. So, perhaps it is somewhere in the code that has to do with public/packs (e.g. terminal output which reads: Content not from webpack is served from /Users/my-mac/workspace/webpacker-example-app/public/packs).

gauravtiwari commented 7 years ago

@secondstreetmedia ohh it's webpack dev server, please go to localhost:5000 and you should see the page :)

gauravtiwari commented 7 years ago

There are two servers that run in development - webpack dev server that runs in development and serves content from memory that's why packs directory isn't created, if you run ./bin/webpack-watcher it will create packs directory for you and will be served from disk.

The rails server however runs on PORT 5000, as before. So, please visit localhost:5000 and you should see the page as in demo.

gauravtiwari commented 7 years ago

Let me know how it goes :)

secondstreetmedia commented 7 years ago

Yep, works great! 👏 When I scanned the terminal output after starting the server, I saw localhost:8080 multiple times, but completely missed Listening on tcp://localhost:5000. If you think others might miss it, too, then maybe adding something like "Open browser to localhost:5000" to the last line of the instructions under "Running in development" would be helpful for those of us who are port-challenged. 😁

gauravtiwari commented 7 years ago

Awesome, good stuff ✋

Good tip, I will do 😄

gauravtiwari commented 7 years ago

Fixed 👍 . Have some 🍰