When using Webpack-Dev-Server with Laravel, accessing it from network devices does not properly inject CSS via JavaScript due to a memory issue

After successfully configuring webpack-dev-server and Laravel Valet to serve the site and redirect to the correct path on mobile devices within the same network, I encountered an issue. The CSS was not being injected via JS served from memory; it only worked if I manually wrote the JS/CSS to disk, which is not ideal. I suspect that the JS on the mobile device is not pointing through the proxy, but I am unable to determine how to address this.

Any assistance would be greatly appreciated. Thank you!

entry: {
    'app.bundle': './src/scripts/index.js',
  },
  cache: true,
  output: {
    filename: '[name].js',
    publicPath: 'http://localhost:8080/',
    chunkFilename: '[chunkhash].js',
  },
      .
      .
      .
   devServer: {
    hot: true,
    inline: true,
    overlay: false,
    quiet: true,
    host: '0.0.0.0',
    proxy: {
      '*': {
        target: 'http://laravelapp.dev/',
        changeOrigin: true,
      },
    },
    disableHostCheck: true,
    contentBase: path.resolve(__dirname, './src/templates'),
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    watchContentBase: true,
    watchOptions: {
      poll: false, // might be needed for homestead/vagrant setup, review
    },
    historyApiFallback: false,
    noInfo: true,
  },

Answer №1

After making a few adjustments to my webpack.config file, I finally got it up and running:

entry: {
    'main.bundle.js': [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/scripts/app.js',
    ],
  },
  output: {
    filename: '[name].js',
    publicPath: '/',
    chunkFilename: '[chunkhash].js',
  },
      .
      .
      .
   devServer: {
    hot: true,
    inline: true,
    host: '0.0.0.0',
    proxy: {
      '*': {
        target: 'http://laravelapp.dev/',
        changeOrigin: true,
      },
    },
    disableHostCheck: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    watchContentBase: true,
    historyApiFallback: false,
  },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to define these variables at a global scope within my controller?

In my controller (NodeJS/Express), I have 10 routes that all use the same variables 'startDate' and 'endDate'. Is there a way to declare these globally so they don't need to be repeated in each route? Currently, my code checks if ...

Mastering MongoDB update functions in JavaScript

I've encountered some difficulties while using the MongoDB API to update a document. Despite trying various methods, none of them have been successful so far. Strangely enough, inserting and deleting documents work perfectly fine. Let me explain what ...

Tips for adjusting the angle in SVG shapes

I have designed an svg shape, but I'm struggling to get the slope to start from the middle. Can someone please provide assistance? <svg xmlns="http://www.w3.org/2000/svg" fill="none"> <g filter="url(#filter0_b_1_2556)"&g ...

Add a component to another component in real-time

Check out my StackBlitz demo: DEMO I'm attempting to insert the 'table' component into the #test section of the app component when the visualization type is 'table'. To achieve this, I am using the createTable() function which gen ...

Using AngularJS to serve $resource through https causes Angular to transition from https to http

After successfully setting up a ng-resource in my AngularJS project to fetch data from a REST API, everything was running smoothly in the development and testing environments, both of which operated over http. However, upon moving to production where the e ...

Toggle camera on and off using a single button in Javascript

I'm encountering an issue with my camera functionality. I've implemented a button to open the camera (see code below), but I'm unsure how to turn off the camera when the same button is clicked. Snippet of my code: Button: <a type=" ...

How can I determine the size of the custom options dropdown in Magento?

I'm facing a challenging issue that I can't seem to crack. It might be because I'm still learning the ropes and struggling with technical jargon. Please bear with me as I try to explain my problem. Here is a summary of what I'm trying ...

There are currently no parameters assigned to Routes

As a beginner in the world of Laravel, I am confused about why my routes do not have parameters like "id". Here is an image for reference: https://i.sstatic.net/Bd1X2.png I have created routes using the following code: Route::resource('/', &apo ...

Developing an E-commerce Cart feature using AJAX, HTML5, and Jquery exclusively

I am looking to develop a Cart System using solely HTML5, AJAX, and Jquery without incorporating any server side scripting language like PHP or ASP.NET. The scenario I have is: "A designated HTML division displaying added products with their Name, Price, ...

Plugin refresh after callback

I have a webpage that features a row of buttons at the top, followed by some content below. Whenever one of the buttons is clicked, the content is updated using UpdatePanels. Within this content, I am attempting to incorporate the royal slider plugin, wh ...

What is the process for installing an alpha version package using npm?

npm install bootstrap After running this command, Bootstrap 4.5, the latest stable version, will be installed on your system. npm install bootstrap 5.0.0-alpha1 If you try to install Bootstrap 5 with this command, it will return an error. ERR! code ETARG ...

Create an input box with a designated class

When I click the button in my HTML and JavaScript code below, I am able to dynamically add a text field and radio button. This functionality is working properly. However, I also want the newly generated text field to have the same font size and appearance ...

Utilize recursive and for loop methods for parsing JSON efficiently

I have a JSON file that requires parsing. I'm attempting to implement a recursive method for this task. The current JSON data is structured as shown below: Item 01 SubItem 01 InnerSubItem 01 Item 02 SubItem 01 InnerSubItem 01 Unfortunately, t ...

Javascript regular expressions are not functioning as expected

When testing the string "page-42440233_45778105" against the pattern "(page-\d+_\d+)", an online tester at was able to successfully find a match. However, when executing the code in browser js, the result is null. Why might this be? var re = ne ...

When attempting to deserialize a 2D array in JSON, it unexpectedly returns as a string instead of

I am trying to figure out how to deserialize the JSON string provided below into a two-dimensional array object using JavaScript. Whenever I attempt to use JSON.parse or eval, it ends up getting converted into a string format. Currently, I am utilizing D ...

What is the best way to convert a graphql query into a JSON object?

I'm facing an issue where I need to convert a GraphQL query into a JSON object. Essentially, I have a query structured like the example below, and I'm seeking a method to obtain a JSON representation of this query. Despite my efforts in searching ...

What is the preferred method for front-end and back-end communication regarding the linking of notification routes?

Looking to integrate a react application with real-time notifications that may contain links to different routes within the app. How can the backend be informed about these routes? What communication method should be used? One possible approach is to cate ...

Perform data migrations using a Laravel package

I want to set up multiple Laravel projects. One will contain my models and migrations, which I'll refer to as my schema project. The other projects will have different frontends for various purposes and will depend on the schema project. However, I&ap ...

What is the best method for extracting a value from a JSON file within an array using electron and node.js?

Hey there, I'm currently working with a JSON file that contains an array of value sets. I'm trying to figure out how to extract the first value from the initial set, specifically the value 3 under the key "pink". This is all being done in Node.js ...

Is Your Website Optimized for All Devices?

Creating this website was just a little project for me. I've been experimenting with different methods to ensure it's compatible with all devices and fits perfectly on each screen. Unfortunately, I'm pretty clueless when it comes to @media ...