Build the Static App First

Hey ahmedbhs!

Great question! The answer is a bit more interesting than a yes/no :).

First, yes, by the end of the tutorial, we will delete all of the *markup* from our Twig template that is now being rendered by React. But we will not completely delete your Twig templates.

Second, you can of course create a pure single-page-app with React. In this case, you wouldn't need any Twig templates. Well, maybe you would just render one Twig template that has some basic markup... but that would be it (React would render everything else). Or, you can create a more traditional multi-page app (SymfonyCasts is a good example of this) where *some* parts of your app use React. In that case, you would render a Twig template that, for example, rendered most of the markup for your page. But, in *one* spot on the page, you would just have an empty div. Then, React would build everything inside this div.

This is actually what we'll do in this tutorial. By the end, we will still have a traditional (no React) login page. And, on the "main" page, the header/layout will still be done by Twig, as well as the leaderboard on the right. Only the table/form part will be done by React. So basically, you can do everything in Twig or everything in React or any mixture in between :).

Cheers!

Hey Dan_M!

Yea, thw dev-server is great, once you figure out how it works (it was a little "weird" for me at first not to see my compiled assets - eventually I realized that they're generated automatically).

Anyways, I can't remember the exact behavior with dev-server and CopyWebpackPlugin. But, I think I know the issue. I believe that plugin, like all of Webpack itself, does not physically copy the files when you're in dev-server. Instead, if you make a request to the dev-server - e.g. http://localhost:8080/build/static/myfile.png - and it dynamically returns that to you. I'm not 100% sure about this, but I believe that the plugin works this way (it should).

The problem then, is that, in your templates, you're final HTML probably just looks like &t;img src="/build/static/myfile.png">, which means your requesting that file from your local, PHP server - not from the dev-server URL. In theory, if you're using the asset() function, that corrects things: it looks in manifest.json and sees that the URL needs the dev-server hostname in front of it. However, due to bad behavior with CopyWebpackPlugin, static assets are not included in manifest.json... and then we're all sad :(.

So, let me tell you 2 things:

1) If you remove the cleanupOutputBeforeBuild() call (which is not as important with dev-server anyways), you can probably work around this by running a normal build first, then doing dev-server. Kinda lame, but there you go.

2) In the upcoming/next release of Encore (0.21.0), we will have a new copyFile() method that works like the CopyWebpackPlugin, but correctly puts things into the manifest.json file. This should be the real solution.

Let me know if that makes sense! Or if I'm totally wrong! :)

Cheers!

weaverryan,

I used your "kinda lame" workaround and, of course, that worked for assets rendered with twig. Without the cleanupOutputBeforeBuild() call, all of my static assets were still there and were called as I would expect.

However, when I rendered an asset in React, it did not work using something like this:

render() {
    return (
        <img src="/build/static/myasset.png">
     )
}

But if I change the img tag to

<img src="http://localhost:8080/build/static/myasset.png">

it works just fine.

Of course, that's not a solution. So, I'm still stuck.

Beyond that, your solution #2 sounds good, but I don't see how that works in React. Is there a jsx equivalent to asset() I should be using?

Hey Dan_M!

Oh, oh oh! You're doing something WAY more awesome than what I was thinking! You're referencing an asset from JavaScript! Brilliant! Just do this:

// make this the REAL relative path to the image file, relative to the original directory (not the built directory)
const assetPath = require('../images/myasset.png');

render() {
    return (
        <img src="{assetPath}">
     )
}

That's it! You don't even need the copy plugin. Webpack natively (well, when you tell it what to do, which Encore does) knows how to require image files. By requiring the image file, it will move it into the build directory and will return back the final path. This is actually the proper way to render image paths :).

Let me know if this make sense!

Cheers!

weaverryan,

That works!

In my case, the render function was in a form class, so it looked like:

export default class MyForm extends Component {
    constructor(props) {
        super(props);
      ...
        this.assetPath = require('../../static/myimage.png');
    }

    render() {
        return (
             <img src={this.assetPath}>
         )
    }

Perhaps simpler is to just do:

    render() {
        return (
                <img src={require('../../static/myimage.png')}>
         )
    }

In either case, it took me a minute to realize the path in the require statement is relative to the javascript source file, not the build directory.

Thanks!

Dan

Hey Dan_M

Yep, you are correct, the require function points to where the file lives. I'm glad to hear that your code is working again. Cheers!