Running commands in brunch

I'm a beginner when it comes to brunch, and I seem to be facing some issues with setting it up correctly. I am using the dead simple skeleton, and I have included a script (main.js) in the app > scripts directory. The script simply contains a console.log('init'); statement. Although this script successfully compiles (as I can see it in app.js), it does not execute. On my HTML page, all I have is:

<head>
    <meta charset="utf-8">
    <title>SITE</title>
    <link rel="stylesheet" href="app.css">
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>

This is how the content of the app.js file looks like:

require.register("scripts/main", function(exports, require, module) {
console.log('init');
});

Could anyone provide assistance regarding what might be going wrong here?

Answer №1

To integrate the script wrapper into your html, ensure you include the require function:

<head>
    <meta charset="utf-8>
    <title>MY SITE</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<script type="text/javascript" src="scripts.js"></script>
<script>require('scripts')</script>

I faced a similar issue recently and found some helpful insights here. The latest documentation with conventions can be accessed here.

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

Getting the value of a JSON object in CodeIgniter can be easily achieved by using the appropriate

My current project involves using the codeigniter framework to build a website. I am making an AJAX request with jQuery to retrieve data from the server. I have experimented with two different methods of receiving the data: one in a PHP associative array a ...

Decoding XML using AJAX: Picture Link: Does not exist?

Seeking assistance with parsing xml and returning it as needed. Unfortunately, I am unable to retrieve the image link. Can anyone provide help? Here is my code snippet or you can check it out on http://jsfiddle.net/4DejY/2/: HTML <ul data-role="listvi ...

How can I create an admin layout overlay in AngularJS?

Hi there, I have a question regarding using angularJS in an application we are currently developing at work. We need to implement an "overlay" admin style panel. For example, refer to this image: In the first scenario, the URL is "myapp.com/#/works". To ...

Numerous query parameters sharing identical names

I am seeking information on how EXPRESS handles multiple query parameters with the same name. Despite my research efforts, I have been unable to find a reliable source on this topic. Specifically, I am interested in how EXPRESS would interpret a URL such ...

The Angular component router-outlet is not recognized as a known element

I have encountered an error message: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add ...

What is the best way to create operating system-neutral file paths in Node.js?

I'm currently fixing issues with my code while running integration tests on an EC2 instance of a Windows machine. Despite resolving the filenames-are-too-long problem, several paths remain unresolved due to being hardcoded for UNIX systems. I've ...

How can I detect a click event in Angular using Typescript?

I am looking to transform the provided jquery scripts into typescript code. Jquery $(".room").click({ console.log("clicked"); }); TypeScript import { Component } from '@angular/core'; declare var $: any; export class AppComponent { } ...

Having trouble setting up a React project? Encounter a problem running webpack with npm

Currently, I am referencing the tutorial located at http://ccoenraets.github.io/es6-tutorial-react/setup/ in order to set up my React project. However, upon reaching the final stages and running the command npm run webpack The error message I'm enc ...

What is the relationship between dependencies in the `useEffect` hook and state within React?

I have a good understanding of how React's "useState" hook operates. State in React is essentially a list of values associated with specific components, and each "useState" call has an index that references a specific state value. When the React rende ...

Identifying the element with the specified ID within the table's <th> tag in JavaScript

I want to create a table with the title: Summary Statement as of August 3, 2017 at 12:55 The date is functioning properly using JavaScript in other parts of the code, but not in this section. Is there a specific technique I should be aware of? The rest of ...

Which files should be included to define the variable $? in jQuery/JavaScript?

I am looking to create a sliding Div over another div in a simple way. The example provided in this Fiddle is exactly what I have in mind, but as someone new to coding, I encountered the warning Uncaught ReferenceError: $ is not defined after transferring ...

Certain CSS styles for components are missing from the current build

After building my Vue/Nuxt app, I noticed that certain component styles are not being applied. In the DEVELOPMENT environment, the styles appear as expected. However, once deployed, they seem to disappear. All other component styles render properly. Dev ...

Ways to refresh the main frame

Here is an example of parent code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Parent</title> </head> <body> <iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width ...

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

While working on a tabbed control with mobile-angular-ui (), I encountered an issue when trying to generate the tabs dynamically. Initially, everything looked good with the following code: <ul class="nav nav-tabs" ui-state='activeTab' ui-def ...

Is it possible to view a Word document from my website within a browser?

Looking for a solution to preview Word documents directly on my website without the need for downloading. Leveraging the power of Vue.js for the development. ...

methods for removing json comments using javascript

Looking to remove JSON comments using JavaScript? I believe a regular expression would be the most efficient method. { "field": { // comments "n": 1 /* multi-line ... comments */ }, ...

Trouble accessing the error callback in jQuery AJAX with PHP

Experimenting with testing the error callback using the following scenarios: Changing the URL from "telemetry.php" to "asdasfjgafas.php" Inserting <?php header("HTTP/1.1 404 Not Found"); exit(); > inside telemetry.php Even aft ...

Is there a way to access and modify files stored locally through a webpage using HTML?

My team uses a specific application and I need to access a local log that they generate. The goal is to transfer this log to a central system for tracking their activities. To accomplish this, I plan to create a background web application or webpage that a ...

Issue with Ajax: parameters failing to pass without using jQuery

It appears that I am only receiving jQuery results, but I am in search of the correct method to pass parameters via AJAX without using libraries or old browser fallbacks. If there is another thread discussing this topic that I have overlooked, please provi ...

Combining values from multiple arrays into a single array using JavaScript/Reactjs

I am working with an array that contains arrays as its values. My goal is to generate an output that includes all the array values. Please note: The input array and its elements (arrays) do not have a fixed length. Input: array = [ [a,b], [c,d,e], ...