The app constructed using Brunch relies on fixed paths for the app.css and app.js files

After installing brunch on my Windows machine using npm (npm install brunch), I proceeded to create and build a new project in my www root directory (specifically, the Apache www root).

cd .../www
brunch new someproject
cd someproject
brunch build

Upon entering localhost/someproject/public in my browser, I encountered the following errors in the console log (using Chrome):

GET http://localhost/stylesheets/app.css 404 (Not Found) localhost:9
GET http://localhost/javascripts/vendor.js 404 (Not Found) localhost:10
GET http://localhost/javascripts/app.js 404 (Not Found) localhost:10
Uncaught ReferenceError: require is not defined 

It appears that the paths for these files are hardcoded from the root path. How can I resolve this issue? Do I need to make changes in the brunch config file?

I am aware that I have the option to use brunch watch --server and access it through localhost:3333, but I prefer using Apache instead. Essentially, I am facing difficulties deploying the app into production within the public folder.

Answer №1

If you're facing this specific scenario, the solution is to update the app/assets/index.html paths for javascript and CSS files.

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

Filtering rows in angular based on the current data's id

currData = { id: "iStyle1", status: "PENDING" }; data = [ { id: "splitStyle1", rows: [ { id: "1cUMlNRSapc5T", row: 2, sequence: 2, status: ...

Parallel ajax function

After creating a form for registering new accounts, I wanted to ensure that the chosen email is available by checking it against a webservice. However, this process takes a few seconds. Let's take a look at the method used: function validateEmail(ema ...

How about displaying the Ajax response as an image?

I'm working on a script that pulls an image link, which seems to be functioning correctly. However, I am struggling with how to display the link as an image. Can someone please assist me with this? <script src="//ajax.googleapis.com/ajax/li ...

What is the process for updating a document with two specific filter conditions?

I have a structure in my document that appears as follows: type Document = { _id: string title: string variants: VariantType[] } type VariantType = { timestamp: Int active: Boolean content: any[] } I am attempting to filter a document using ...

What is the best way to replicate the content of the textarea exactly as it is (with all line breaks and special characters)?

Below is the Laravel form I have, and I need to extract the text in a way that retains its original format: <style type="text/css" media="screen"> #editor { position: absolute; top: 150px; right: 150px; bottom: 15 ...

One of the challenges faced with using AngularJS is that it can often

I have a piece of code that is functioning correctly: angular.module('foo', []).config( function($locationProvider) { $locationProvider.html5Mode(true); } ); However, when the code is minified, it gets compressed and looks like this: a ...

JavaScript is displaying an error message stating that the array variable has not been

I'm currently going through a Javascript tutorial on YouTube and I've encountered an error that's puzzling me. Everything seems to be in order with the array definition. Uncaught ReferenceError: words is not defined window.addEventListe ...

Simple steps to validate an ajax response with a specific string

I'm encountering a problem with a simple ajax call that involves checking the returned text against a string: // in my php file echo 'mystring'; // in my javascript if((request.readyState == 4) && (request.status == 200)){ if(req ...

Can you incorporate an eventListener within a for loop? If so, what would be the strategy to execute it successfully?

When it comes to handling and displaying large data, I find For Loops and ForEach Loops to be extremely useful. However, adding an eventListener to a loop can present some challenges. In the code snippet below, you'll see that I'm looping through ...

Comparing npm and yarn: What sets them apart?

I'm curious to know the distinctions between: using npm install -g versus yarn global add Your insight and assistance is greatly appreciated. ...

Unusual problem encountered with Chart.js bar chart, image dispersion

On my HTML page, I have integrated a stacked bar chart using the Chart.js library to visually represent data for users. The data changes based on user selection, and the JavaScript function that enables this onclick feature is: function aggLav(){ [... ...

Enable contenteditable on table by pressing the tab key

I developed a table entry tool and I would like to be able to input items by pressing the tab key instead of having to manually click on each element. I haven't been able to figure out how to make this function work yet. $('table').on(&apos ...

Conceal component while navigating in VueJs

I am working on a Vue project. I am trying to implement a feature where a component is hidden while the user scrolls, but then reappears once the scrolling stops. I have tried using a scroll event, but the component does not show up again. <div c ...

When transmitting information to the server, the browser initiates four requests

I am encountering an issue with my React component. The problem arises when I try to retrieve the current geographic coordinates, as they are being fetched 4 times consecutively. This same glitch occurs when attempting to send the coordinates to the serv ...

Learn the process of showcasing database content on a webpage with an interactive feature that enables users to choose and access additional details

Apologies if this question has been asked before, I have searched for a solution but my web development knowledge is limited. To better understand my issue, you can visit the site at 000freewebhost by following this link: In summary, I am trying to select ...

What is the best way to transmit the attributes of an object with a defined state in one React component to another component using a link and display them?

I currently have two components and one route in my project. I am trying to pass the properties of the place object from one component to another so that I can display them accordingly. The first component holds the list of places in its state, where I map ...

Encountering difficulties during the installation of npm due to various errors

Why is my npm install failing? C:\WINDOWS\system32>npm install npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\WINDOWS\system32 ...

Using TypeORM to Retrieve Data from Many-to-Many Relationships with Special Attributes

Hey there, I'm diving into the world of TypeORM and could really use some guidance. I've been attempting to set up many-to-many relationships with custom properties following the instructions provided here However, I've run into a few iss ...

Leverage the power of express-session in your NextJS project

Currently, I am working on developing a login system using NextJS and MySQL. I am looking to implement sessions for user login, but I am unsure of how to integrate express-session with NextJS. Can anyone provide guidance on whether express-session can be ...

A cookie designed to store and retain the preferred CSS stylesheet choice

I'm looking to create a cookie that will store the preference for a specific CSS stylesheet. I currently have a function in place that allows me to switch between stylesheets: function swapStylesheet(sheet){ document.getElementById('pagestyl ...