How to properly reference the path with newly installed packages using npm in Laravel?

Question

I've installed ReactJS and Babel using npm in my laravel project. They are found in "node_modules" folder created by npm itself. But the problem is my react code doesn't seem to work if I import using this code:

<script src="node_modules/react/react.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="node_modules/babel-core/lib/api/browser.js"></script>

Is the format of the path correct? because if I just import using this type of code for all my imports required for ReactJS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>

It seems to work if I just use the internet for getting the packages.

My react code is here:

<div id="myapp"></div>
<!-- JavaScripts -->
<script type="text/babel">
    var BuckyComponent = React.createClass({
        render: function()  {
            return(
                <h2>{this.props.user} likes to eat {this.props.food}</h2>
            );
        }
    });

    React.render(
        <div>
            <BuckyComponent user="Arth" food="Bacon"/>
            <BuckyComponent user="Arth" food="Pork"/>
            <BuckyComponent user="Arth" food="Chicken"/>
        </div>,
        document.getElementById('myapp')
    );
</script>

Answer 1

That's not the way you use Npm/Bower packages within Laravel. Either package manager will store its files outside the Laravel public folder, the first inside node_modules and the later inside bower_components . So they're not intended to be publicly available.

So how would you use their packages within Laravel? Using build systems like Laravel Elixir , just the Gulp or even the Grunt .

It's all up to you to copy the distribution files of React and Babel, concat them, minify them and the like. You'll end up with them inside the public folder, but before you'll want to do a nice concatenation and minification of all that stuff to serve the smallest possible number of files and their sizes.