What are the steps to launching a yarn app on a dev server?

I've always stuck with npm and never ventured into using yarn or webpack explicitly. The code from this repository needs to be executed: https://github.com/looker-open-source/custom_visualizations_v2

I'm looking for a way to run it like a development server to ensure the files are being served correctly, but I can't find a command like npm run start. Does yarn not have something similar? It seems like the code should work without needing any additional commands.

UPDATE: I attempted running yarn run watch now, but it just seems to rebuild the code instead of actually hosting it anywhere.

javascriptnpmwebpackyarnpkg

Answer №1

When you run the command npm run somecommand
, it searches for the key somecommand in the "scripts" field of the package.json file and executes the corresponding value in the terminal.

For example, npm run start will execute the start script defined in the package.json. The same functionality can be achieved using yarn by running yarn start.

If there is no start script in the linked repository's package.json, but instead a watch script, follow these steps:

  1. Run yarn to install dependencies after cloning the repository locally (similar to npm install)
  2. Execute yarn watch to start the webpack server (equivalent to npm run watch)

Edit: Upon further investigation, the watch command sets up webpack to monitor changes and recompile the project whenever a change occurs.

To launch a development server, create a new script with the name start and use webpack-dev-server

Add entries like the following to your package.json:

...
    "watch": "webpack --config webpack.config.js --watch --progress",
    "start": "webpack-dev-server --config webpack.config.js",
...

After adding these scripts, executing yarn start should open a development server at localhost:8080

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 transform a string representation of data into an array and then showcase it in

After importing CSV data and converting it into the variable stringData, I am facing an issue when trying to display this data in a React table. Although I have attempted to use the map function to separate the headers and map to <th>, displaying t ...

javascriptreactjscsv

Utilizing Chrome Context Script plugin to monitor page changes: A step-by-step guide

Currently, I am in the process of creating a basic Chrome extension with the purpose of removing specific DOM elements from a particular website. In my manifest.json file: { "name": "example", "version": "1.0", "description": "example description" ...

javascriptgoogle-chrome-extensiondom-events

How can CORS be activated? Is it through the server or Javascript, and where does this

Currently, I am testing my ReactJS website on localhost:3333 and my ASP.NET Web API 2 on localhost:54690. I am utilizing axios for my AJAX requests, but encountering an error when making a request. XMLHttpRequest cannot load http://localhost:54690/api/ ...

javascriptajaxasp.net-web-apicorsaxios

Retrieve the values from the second dropdown list based on the choices made in the first dropdown menu within a React application

Hi there. I am attempting to create a cascading dropdown menu using the data from api. For example, in the first dropdown, I have the following options: 1. Fruits 2. Roots 3. Flowers If I select Fruits, then Orange, Apple, and Strawberry should appear. ...

javascriptreactjshtml-select

Unexpected Undefined Return in Request Parameters

Hey everyone, I'm currently working on setting up a mock API server using a JSON file with some dummy data. The first route I created is functioning perfectly: const express = require("express"); const router = express.Router(); const data = requir ...

javascriptnode.jsjsonexpressmockserver

Tips for halting all YouTube videos in a Reactjs environment

I am currently working with React.js and using Next.js. I have implemented a "YouTube video slider" and now I am looking for a way to stop all videos when a button is clicked. Can anyone provide guidance on how to achieve this? Below is the code snippet ...

javascriptreactjsnext.js

A guide to simultaneously sending dual variables by implementing Ajax via JavaScript

I am currently facing an issue with a textarea and PHP variables. I have created a script as shown below: $(document).ready(function(){ $('.post').keyup(function(e){ var post = $.trim($('.post').val()); if (post != ...

javascriptphpjquerymysqlajax

Error in Vue Google Maps: Marker not defined

I'm currently working on integrating a single location map using Google Maps in Vue 2 with Vue-google-maps-2. Despite using code that has successfully worked for other parts of the application where multiple markers are plotted from an array, I am enc ...

javascriptvue.js

The generation of React Native Jest coverage results may vary depending on how an ES6 module is exported

I am working with a React Native button component that consists of its own index.js and styles.js files. The content of styles.js is as follows: import { StyleSheet } from "react-native"; export default StyleSheet.create({ container: { borderRadius ...

javascriptreact-nativejestjs

Troubleshooting AJAX, PHP, and mySQL Interactions

I am experiencing issues with my password change script on my website. I am utilizing an AJAX connection to my php file. While my database connection seems stable and variables are being sent correctly (based on firebug), they seem to disappear along the w ...

javascriptphpmysqlajaxdebugging

Images set as the og:image on the following 14 websites hosted on Vercel require authentication to be displayed

After deploying my Next.js 14 site on Vercel, I placed opengraph-image.png in the app folder alongside layout.tsx. Upon inspecting the meta tag, I noticed the following: <meta property="og:image" content="https://ns-website-6pnvd8ili-mare ...

javascriptreactjsnext.jsvercel

The error message "ReferenceError: $ is not defined" is displayed within

My current requirement involves loading templates within an iframe, and to achieve this, I have implemented the following code: <div class="col m8 l8 s12 margin-top-30" id="hue-demo-bg-div"> <iframe id="myiframe" src="/themes/{{$themeid}}.ht ...

javascriptjqueryhtmliframe

Submit button in React form not activating the onSubmit method

Having an issue with a login form code where the submit handler is not being triggered when pressing the Submit button. Any idea what could be causing this? The loginHandler function does not seem to trigger, but the handleInputChange function works fine. ...

javascriptreactjsformsnext.js

Trouble with getting started on the Google Sheets API (v4) tutorial

I'm currently working my way through a tutorial that can be found at the link below: https://developers.google.com/sheets/api/quickstart/nodejs# When I reach the step of running the quick start file (node quickstart.js), I encounter the following err ...

javascriptnode.jsgoogle-apps-scriptgoogle-apps

Refresh gif without having to reload it in Internet Explorer 11

I'm attempting to create a feature where a gif restarts when clicked by the user, without needing to reload it (due to the heavy size of the gif which is preloaded for my application). The current code functions flawlessly on Chrome and other "modern ...

javascripthtmlinternet-explorergif

Is there a way to pass locale data using props in VueJS Router?

To access hotel data, the URL path should be localhost:8080/hotel/:id (where id is equal to json.hoteID). For example, localhost:8080/hotel/101 This path should display the specific data for that hotel. In order to achieve this, we will utilize VueJS vu ...

javascripthtmlcssvue.jsvue-router

Iterating through an array with a .forEach loop and referencing the variable name

Currently, I am working on a project using JS/React and dealing with nested arrays in an array. The structure of my data looks like this: const ezra = ["Patriots", "Bears", "Vikings", "Titans", "Jets", "Bengals"] const adam = ["Chiefs", "Cowboys", "Packer ...

javascriptarraysreactjsvariables

Building a Laravel PHP application that dynamically generates a custom JSON object fetched from the database and passes it from PHP to

I am faced with the task of generating a custom JSON object by organizing data retrieved from PHP in my Controller. I have full control over what information goes where and in what specific order. To accomplish this, it seems like I will need to go throug ...

javascriptphpjson

Font family 'anticon' is not recognized

While following a coding tutorial on YouTube, I encountered an error message that has me stumped. Despite having the correct import statement and dependency installed, the issue persists. Error message in iOS simulator: https://i.stack.imgur.com/LOVCQl. ...

javascriptreactjsreact-nativedependencies

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

I've encountered an issue with my code where it displays a popup message correctly in Chrome, but when testing it on Firefox and Edge, it creates a strange box at the end of the page instead. Here is the code snippet I'm referring to: var iframe ...

javascriptjqueryhtmlcsspopupwindow