Forked from mblarsen/app__Console__Commands__WebpackCommand.php
Created
June 11, 2018 00:43
-
-
Save sunil-bagde/0dd48ea1bdc4906a5b7528ba5f33ceb8 to your computer and use it in GitHub Desktop.
Laravel and Webpack (with webpack-dev-server)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| namespace Supawdog\Console\Commands; | |
| use Illuminate\Console\Command; | |
| use Symfony\Component\Process\ProcessUtils; | |
| use Symfony\Component\Console\Input\InputOption; | |
| use Symfony\Component\Process\PhpExecutableFinder; | |
| class WebpackCommand extends Command | |
| { | |
| protected $signature = 'webpack {--config=webpack.config.js}'; | |
| protected $description = 'Serve the application on the PHP development server'; | |
| public function fire() | |
| { | |
| chdir($this->laravel->publicPath()); | |
| $config_path = $this->option('config'); | |
| list($host, $port) = $this->getHostAndPort($config_path); | |
| $this->info("Backend started on http://{$host}:{$port}/ as proxy"); | |
| $this->info("Client running on " . $this->getClientUrl($config_path)); | |
| $binary = ProcessUtils::escapeArgument((new PhpExecutableFinder)->find(false)); | |
| $base = ProcessUtils::escapeArgument($this->laravel->basePath()); | |
| passthru("WEBPACK_DEV=running {$binary} -S {$host}:{$port} {$base}/server.php"); | |
| } | |
| protected function getClientUrl(string $config_path) : string | |
| { | |
| $config = $this->getConfig($config_path); | |
| return array_get($config, 'output.publicPath'); | |
| } | |
| protected function getHostAndPort(string $config_path) : array | |
| { | |
| $config = $this->getConfig($config_path); | |
| $proxies = array_get($config, 'devServer.proxy'); | |
| $first_proxy = array_first(array_values($proxies)); | |
| $host = parse_url($first_proxy, PHP_URL_HOST); | |
| $port = parse_url($first_proxy, PHP_URL_PORT); | |
| return [$host, $port]; | |
| } | |
| protected function getConfig(string $config_path) : array | |
| { | |
| static $config; | |
| if (is_null($config)) { | |
| if (strpos($config_path, '/') !== 0) { | |
| $base = $this->laravel->basePath(); | |
| $config_path = "/$base/$config_path"; | |
| } | |
| // Run through node to "compile" the config | |
| exec("node -e 'console.log(JSON.stringify(require(\"$config_path\")))'", $json); | |
| $config = json_decode($json[0], true); | |
| } | |
| return $config; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* | |
| * A replacement for elixir() that will work for both typical laravel development where the | |
| * blade file will include links and references to stylesheets and javascript, and it will | |
| * work for when you run laravel as the backend in a proxy setup with webpack-dev-server | |
| * as the controller. | |
| */ | |
| if (! function_exists('webpack')) { | |
| function webpack($resource, $is_entry = false) : string | |
| { | |
| static $manifest; | |
| $is_webpack_dev = !!getenv('WEBPACK_DEV'); | |
| $type = dirname($resource); | |
| $chunk = basename($resource); | |
| // If in webpack dev mode only return entries | |
| if ($is_webpack_dev) { | |
| if (! $is_entry) { | |
| return ''; | |
| } | |
| return call_user_func("webpack__$type", "$resource.$type"); | |
| } | |
| if (is_null($manifest)) { | |
| $manifest = json_decode(file_get_contents(public_path('rev-manifest.json')), true); | |
| } | |
| if (isset($manifest[$chunk])) { | |
| $assets = $manifest[$chunk]; | |
| // If only one it is a string | |
| if (is_string($manifest[$chunk])) { | |
| $assets = [$assets]; | |
| } | |
| // Match chunk and type | |
| $asset = array_first($assets, function ($asset) use ($resource) { | |
| return strpos($asset, $resource) === 0; | |
| }); | |
| return call_user_func("webpack__$type", $asset); | |
| } | |
| throw new InvalidArgumentException("Resource {$resource} is not defined in asset manifest."); | |
| } | |
| function webpack__js($url) | |
| { | |
| return "<script type=\"text/javascript\" src=\"$url\"></script>"; | |
| } | |
| function webpack__css($url) | |
| { | |
| return "<link rel=\"stylesheet\" href=\"$url\"/>"; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="csrf-token" content="{{ csrf_token() }}"> | |
| <title>{{ config('app.name', 'Supaw Dog') }}</title> | |
| {!! webpack('css/commons') !!} <!-- not marked as entry --> | |
| @stack('styles') | |
| <script> | |
| window.Supawdog = <?php echo json_encode([ | |
| 'csrfToken' => csrf_token() | |
| ]); ?> | |
| </script> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| @yield('content') | |
| </div> | |
| @yield('footer') | |
| {!! webpack('js/commons') !!} <!-- not marked as entry --> | |
| @stack('scripts') | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @extends('layouts.app') | |
| @push('styles') | |
| {!! webpack('css/app') !!} <!-- not marked as entry --> | |
| @endpush | |
| @push('scripts') | |
| {!! webpack('js/app', true) !!} <!-- this is the entry point --> | |
| @endpush |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Vist this URL in browser | |
| config.output.publicPath = 'http://mysite.dev:8080/' | |
| // Proxy to Laravel backend | |
| config.devServer = { | |
| contentBase: 'public', | |
| hot: true, | |
| inline: true, | |
| proxy: { | |
| "**": "http://0.0.0.0:8000/", | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| config.plugins = [ | |
| ... config.plugins, | |
| // ... other production plugins | |
| // Dump manifest assetsByChunkName which is used by the webpack helper function | |
| function onBuildComplete() { | |
| this.plugin('done', function (stats) { | |
| fs.writeFileSync( | |
| path.join(__dirname, 'public', 'rev-manifest.json'), | |
| JSON.stringify(stats.toJson().assetsByChunkName) | |
| ) | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment