You are making an awesome new JavaScript-based app in React. However, it needs to live inside an existing framework, such as Symfony for PHP. You want the hot-reloading function that you get with Webpack Dev Server, but you also need the content to be served from your LAMP stack because it creates the HTML wrapper page.
What do you do?
The answer is to run two servers: both Webpack Dev Server and your existing Stack. Here is how…
Configuring Webpack
Start by installing Webpack Dev Server as usual.
npm install --save-dev webpack-dev-server
Create a script entry in package.json to run it:
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
}
We also need to make one change to our webpack.config.js file. We need to tell the output to point back at the Webpack Dev Server. Otherwise, it will point at your LAMP stack.
output: {
publicPath: 'http://localhost:8080/scripts/'
}
Super. Next, let’s configure the LAMP stack.
Configuring your existing server
This step is easy. All we need to do is to point the JavaScript at the Webpack Dev Server.
Let’s say you have this at the moment:
<script src="/scripts/app.js"></script>
Change it to:
<script src="http://localhost:8080/scripts/app.js"></script>
Remember that when you are building for production, you will want to take the changes out. The easiest way to do this is to have a dev webpack.config.js file, and a production one, and have your build tool use the correct one depending on the context.
Don't have time to check my blog? Get a weekly email with all the new posts. This is my personal blog, so obviously it is 100% spam free.
Tags: javascript, PHP, react, webpack
This entry was posted on Monday, March 20th, 2017 at 11:00 am and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.