Problem wiht npm start

[pineapplegum]

Thanks for making this boilerplate. It seems great. However, I cannot get the npm start command to work. The "npm start" command stops at the following line:

src\locals.js -> build\locals.js

.. and then it just stays there, with nothing happening. Do you know a workaround for this?

[Robert-W]

That actually looks right, the start command is a watch command. So at that point you should be able to load localhost:3000 in your browser and see the boilerplate running. What your seeing is just the application being idle, as you edit css and js files in the src directory you should notice updates appearing in terminal beneath that line. When you are done editing, you can hit ctrl + c in terminal to stop the watch process including browsersync.

[pineapplegum]

I've tried accessing localhost:3000 in my browser, but there doesn't seem to be anything running on that port. It could be an issue with my firewall or something else. I will check.

[Robert-W]

Ok, that's where it default tries to go. If you scroll up in the terminal output, you should see something like below:

[BS] Access URLs:
 -----------------------------------
    Local: http://localhost:3000
 External: http://10.200.34.171:3000
 -----------------------------------
[BS] Serving files from: build
[BS] Watching files...

If you do not see this then there was an issue with Browsersync not setting up the dev server. You can also change which port this runs on by modifying either the gulpfile.js or the npm start command.

In your gulpfile.js, change the server config from

port: process.env.PORT || 3000,

to

port: process.env.PORT || 8080,  // or whatever port works

Or in your npm start command in your package.json to look like this.

"start": "npm run babel -- -w & gulp start & PORT=8080 gulp serve",

[pineapplegum]

Thanks for the help so far.

When running npm start I do not see the Access URLs listed, so based on your comments there is an issue with Browsersync not setting up the dev server. I've tried with several different ports (by editing the gulpfile.js) that I know are available, but the problem is still there.

[Robert-W]

Ok, yea if browser sync is not getting up and running then the port wont matter. What environment are you running (OSX, Windows, Linux, etc.)?

You may be able to run it from a normal web server on your machine if you load the build folder. All browsersync does is set up a local web server and then force refresh when any files are changed automatically, so that should be able to be replaced by any webserver that can see the build folder.

[pineapplegum]

I'm running on Windows 10. I tried running it on another web server, and it works fine there. However, it would be great to use the Browser sync instead.

Edit: For your information I tried running gulp serve manually, and that works as expected, serving the application on localhost:3000 (but browsersync don't work though).

[pineapplegum]

Ok, I figured it out. The problem was that "&" does not work in the windows command line, and hence only the first command in the start script was running (the other commands were being ignored). I fixed this by using the parallelshell package to run concurrent commands:

"start": "parallelshell \"npm run babel -- -w\" \"gulp start\" \"gulp serve\""

I'll close the issue now. Many thanks for your help.

[Robert-W]

Thanks for the update, I will add another script and a note to the readme for other windows users.