Angular Starter - Place bower_components in the app's directory folder for seamless integration

Recently, I incorporated angular-seed into a coding challenge for a job interview. Feedback I received mentioned that keeping bower_components inside the app folder was not ideal.

Question 1: Is it truly considered bad practice to have bower_components within the app folder?

Following the feedback, I decided to relocate bower_components to the same level as the app folder. This created issues with references in index.html as they were expecting bower_components to be within the app folder.

Question 2: How can I reference bower_components outside the app folder? Would there need to be a build step involved to copy the app to a ./public folder and then copy bower_compnents into ./public/app before starting the server and configuring it to serve static files from ./public/app?

I attempted to modify the "prestart" command to achieve this, but it didn't seem to sit right with me. Additionally, making changes in the app folder required restarting the server each time to see these changes reflected in the browser.

What is the recommended practice in this situation? I know that the yeoman generator places bower_components outside the project root, using gulp/grunt tasks to adjust references. However, I prefer angular-seed for its minimalistic approach and would like to solely rely on npm for build tasks.

javascriptangularjsnpmangular-seed

Answer №1

For optimal organization, it is recommended to store bower_components outside the app folder, similar to node_modules.

Both are package managers. Configure paths using .bowerrc: (docs)

{
  "directory": "public/app/js"
}

bower install will install all files listed in bower.json into the specified directory.

Alternatively, if you utilize grunt, you can observe how yeoman generator-angular employs grunt to minify and organize bower scripts/css.

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="/scripts/app.js"></script>
        <script src="/controllers/main.js"></script>
        <!-- endbuild -->

This is what the Gruntfile.js looks like. (The Gruntfile is generated when selecting yo angular)

During a grunt build, your index.html is concatenated, everything is copied to a dist folder, resulting in the following script references:

<script src="scripts/vendor.2bed74dc.js"></script>
<script src="scripts/scripts.f9d73ac6.js"></script>

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

Guidelines for ASP.NET MVC 4: Delivering a file from a controller to a view using AngularJS

I am having trouble downloading a file from the server, despite following various examples. Here is the code snippet that I have been using: Controller (ASP NET MVC): public HttpResponseMessage GetFile(string filename) { try ...

c#angularjsasp.net-mvcasp.net-mvc-4

Tips for preserving the URL of a 404 page in AngularJS

We are currently developing an angularjs application where users can publish their profiles as resumes. For example, a valid URL for a published profile would be: www.page.com/public/johnsmith However, if the URL is something like: www.page.com/public/ ...

javascriptangularjshttp-status-code-404url-routing

I am having issues with Hot Reload in my React application

My app was initially created using npx create-react-app. I then decided to clean up the project by deleting all files except for index.js in the src folder. However, after doing this, the hot reload feature stopped working and I had to manually refresh the ...

javascriptreactjswebpackjsx

What is the best method to determine the length of an array in JavaScript while excluding any "Empty Slots"?

Are there any built-in functions, properties, or operators that can determine the length of an array without counting empty slots? ...

javascriptarrays

Immersive multimedia experience with HTML5 video interactivity

I am currently facing a challenge with inserting interactive buttons on a video in a responsive manner. Despite my efforts, I have not been successful yet. Screen 1 Screen 2 The screenshots provided depict the video at the end. The goal is to overlay t ...

javascriptjquerycsshtml

Utilizing JQuery to implement a single code snippet across numerous elements

Is there a way to apply a piece of code to multiple divs for resizable handles without using different class names? $('.elementResizable').resizable({ handles: { 'nw': '#nwgrip&apos ...

javascriptjqueryhtmljquery-ui

Angular's UI router is directing users to the incorrect URL

Just starting out with Angular 1 and tasked with adding a new feature to an existing webapp. The webapp utilizes jhipster for backend and frontend generation (Angular 1 and uirouter). I attempted to create my own route and state by borrowing from existing ...

javascriptangularjsangular-ui-routerjhipster

accessing the offsetTop property of React elements

When working in React, I've noticed that the offsetTop value of an element differs between componentDidMount and componentDidUpdate. This is surprising to me because I believed componentDidMount occurs after render, meaning the DOM elements should be ...

javascriptreactjs

Determine if a mobile application has been installed using Vue.js

I am currently developing a web application and have implemented a check to determine whether the user is accessing it from a mobile device or laptop. Let's consider the link as: my-site.com In addition to the web version, my site also offers a mobi ...

javascriptandroidvue.jsconditional-statements

Total visitors who have visited my webpage

As a novice in the world of web design and meteor, I am embarking on a journey to create a webpage that tracks the number of visitors it receives. This will be my very first attempt at utilizing meteor for this purpose, so any guidance or assistance prov ...

javascriptmeteor

Issue encountered during installation of node bcrypt

I'm currently learning about Sails.js and I'm interested in encrypting passwords using the bcrypt node module. To install the bcrypt module, I used the command npm install bcrypt. However, I encountered several dependencies, so I also installed ...

node.jsnpmsails.jsbcrypt

Make a deep clone in JavaScript while also altering the parent node's type and name

I am looking for guidance on how to clone a Node and then convert its nodeName, ensuring that the attributes are copied along with the children deeply. I want to achieve something similar to switching an existing span element to a div while retaining all i ...

javascriptclonedom4

When a HighCharts container is chosen, the positions of other containers are altered

Encountering unusual behavior with HighCharts while selecting a specific chart. Only the top right gauge triggers positional shifts in other gauges, unlike the others that function correctly. Struggling to identify the root cause of this issue and seekin ...

javascripthtmlcsshighcharts

Using inline SVG as a background in CSS

Recently, I've been on the hunt for a way to create a blur effect on a background specifically for IE10+. After experimenting with StackBlur, I found that it did work, but unfortunately, it was quite slow due to the size of my background image. I&apos ...

javascriptcsssvgbackgroundblurry

Execute a skip function on the source object

I'm completely new to using underscore js, and I'm attempting to exclude a specific property from an Object. What I tried was myObj = _.omit(myObj,name) console.log(myObj); However, the myObj still retains the property name. Interestingly, if I ...

javascriptunderscore.js

Leveraging the information received from the server within an Angular ngRepeat directive

I have been attempting to retrieve data from the server using the $http service in angular.js and then utilize that data in my template with the ng-repeat directive. However, I am facing an issue where the fetched data is not being displayed properly, and ...

phpangularjsangularjs-ng-repeat

How can you identify when an input value has been modified in Angular?

For my current project, I am developing a directive to be used with a text input field in order to format currency input. This directive has two HostListeners - one for when the input loses focus and one for when it gains focus. When the blur event occurs, ...

javascripthtmlangularangular2-directives

Enable retrieval of calculated time duration in jQuery time picker

After implementing two separate timepickers for calculating a time duration, I am looking to access this computed duration for further calculations later on the page. How can I retrieve the duration that is already displayed to the user after using the sec ...

javascriptjquery

Determine the position of a document within a collection by sorting it

As a newcomer to MongoDB and Mongoose, I am working with a collection of highscores containing documents structured like this: {id: 123, user: 'User14', score: 101} {id: 231, user: 'User10', score: 400} {id: 412, user: 'User90&apo ...

javascriptmongodbmongoosemapreduce

The showdown between JSON and a hefty JavaScript array

Currently, I am developing a jQuery autocomplete feature that will need to handle between 10 to 20k records. The dataset is static, and I have the option to either retrieve it from a JSON file or embed it directly into the page using a single line of code ...

javascriptperformancejson