Removing unnecessary files from a frontend npm package in a production environment: Best practices

Having trouble organizing the build process for my frontend web app created with Angular 2 and TypeScript.

This is the structure I'm working with:

/
 - dist/   <-- transpiled .js files
 - src/    <-- .ts files
 - assets/
 - bower_components/
 - node_modules/
 - package.json
 - index.html

Question 1

Would like to remove src folder from production server. How should I approach deleting it? Using npm script, Grunt task, or rm when creating a Docker image?

Same issue with package.json and Gruntfile.js.

Question 2

Concerns about node_modules folder: bundling dependencies with Browserify into a single file. Is it necessary to delete node_modules on production server? If so, how?

Also unsure about which modules not included in final bundle (e.g. referenced from <script> tags) to delete and keep. Any advice?

typescriptnpmangularbrowserifynode-modules

Answer №1

If your TS/JS is all client-side, like running in the browser, then one common approach I've noticed in projects without server-side code is to have a designated www folder mirroring the website's URL structure pre-deployment. All development-related files (src, node_modules, etc.) are kept outside of this folder for simplicity during deployment. Pretty neat solution!

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 a precise item in JSON with varied key signatures

Given the following JSON data: var responses = {customer : {results: 2938; id: 9283}, bredesh : {results: 2938; id: 248} }; I am trying to use an if statement in my HTML template : <div ng-if="response.(customer and bredesh and any new element (Is ...

angularjsangulartypescriptionic-framework

"Trouble with Express.js: CSS isn't loading, yet HTML displays

Click here to view folders and files server.js is the code I have created so far //importing packages const express = require('express'); const admin = require('firebase-admin'); const bcrypt = require('bcrypt'); const path = ...

javascripthtmlcssexpressnpm

Personalize the appearance of autocomplete in Angular 2 using a dynamic <ng-content> tag

Currently, I am working on developing an autocomplete feature for a component. However, I am facing difficulties in handling the display of the items. I experimented with using ng-content to render the item but encountered failures. What I aim for is to ut ...

angularionic2

Error: Unable to access the 'https' property as it is undefined

My nuxt app, which is built with Firebase and Vue, encounters an error when running the emulator. The error message states: TypeError: Cannot Find Property 'https' of undefined. This issue seems to be related to the https property in my index.ts ...

typescriptfirebasevue.jsnuxt.js

Ways to showcase my Node.js CLI module across various environments

As I develop a cli using nodejs, named xygcli, everything appears to be running smoothly. However, once it was published, I received feedback from some users indicating that they were unable to locate the command "xygcli not found (zsh)" Even though they ...

node.jsnpmcommand-line-interface

Storing information retrieved from the API for use in different modules

Trying to extract data from a WEB API service using Angular 8 has been quite challenging for me. A service I created makes the API call: return this.http.get<UserSession>(uri) .pipe(map((json: UserSession) => this.EntryFormAdapter(json))); Th ...

angulartypescript

What strategies can be implemented to achieve optimal test coverage in Node.js unit testing?

I am currently working on Unit testing within NodeJS and have successfully utilized NYC to assess the coverage of my unit testing. I am interested in expanding the scope of my unit testing to enhance the coverage of both Statement branches and condition ...

node.jsunit-testingnpmtest-coveragenyc

Implementing the same concept yet yielding diverse variations?

I'm a bit confused as to why a1 is evaluated as false while a2 is considered to be of type boolean. Can someone explain the reasoning behind this discrepancy? type Includes<T extends readonly any[], U> = U extends T[number] ? true : false; type ...

typescripttypescript-generics

Is there a way to execute the run function of a different Component in Angular 7 without causing the current

Is there a way to execute the ngOnInit() function from one component inside another component without needing to refresh the existing page? ...

angulartypescriptangular7

The Angular 7 template falls short of occupying the entire page

I am currently working on converting an HTML page into my Angular project. While it functions correctly in the HTML version, it does not fill up the entire page when transferred to Angular. You can view an example of this issue on StackBlitz at the followi ...

cssangularangular7

What are the steps to effectively manage and utilize packages in Yarn 2?

As a Yarn novice, I recently followed the latest Yarn tutorial which led me to install Yarn 2. Running the yarn --version command confirms that I am using version 2.0.0-rc.34. However, it seems that Yarn 2 does not have a built-in command to display a lis ...

npmyarnpkgyarnpkg-v2

Position the circles in a way that they align along the circumference of a larger

I need help arranging a group of circles around another circle without any of them overlapping. I have all the radius measurements for each circle, as well as the coordinates for the target circle. The target circle will always be large enough to contain ...

typescriptmathgeometry

Error encountered during react parsing: An unexpected '#' error was encountered when using the react-router-sitemap npm package

I'm currently working on building a sitemap using the react-router-sitemap npm package. After installing all the necessary dependencies related to react-router-sitemap, I created a file called sitemap-generator.js and added the following code. router ...

javascriptreactjsnpm

What is the best way to retry an action stream observable in Angular/RxJS after it fails?

Kindly disregard the variable names and formatting alterations I've made. I've been attempting to incorporate RxJS error handling for an observable that triggers an action (user click) and then sends the request object from our form to execute a ...

angulartypescriptrxjsrxjs6rxjs-observables

I am powerless against the urge to constantly use npm

I am having trouble terminating my discord.js bot (Node.js npm). I attempted to terminate it using the following link: https://i.sstatic.net/rTadi.png I also tried running the command: npm stop npm ERR! missing script: stop npm ERR! A complete log of t ...

npmdiscord.js

Each npm command is throwing a 'TypeError' message stating that it cannot read the property 'get' of undefined

My npm installation stopped working after I changed a config parameter: Specifically, I modified the cafile parameter in the npm config, and now every npm command throws these errors: Error: EISDIR: illegal operation on a directory, read TypeError: ...

node.jsnpm

Conflict in upstream dependency detected in npm sanity/client

Currently, I'm in the process of developing a Next.js/Sanity project and it seems like there might be an issue with duplicate installations of the Sanity client. The error message displayed in my command terminal is as follows: npm ERR! code ERESOLVE ...

reactjsnpmnext.jssanity

How can I eliminate the error message "WARNING: no homepage content found in homepage.md"?

Starting my journey with KSS utilizing Keith Grant's CSS in Depth as a guide. In section 10.1.4, the author suggests: To begin, create a new markdown file named homepage.md inside the css directory. This file will serve as an introduction to the patt ...

htmlcssnpmdocumentationknyle-style-sheet

Method with undefined constructor parameter in Typescript

Understanding how to effectively use Typescript and Angularjs in conjunction has been a challenge for me. Despite reading numerous blog posts and consulting the official documentation for both projects, the concepts just haven't fully clicked. My Ang ...

angularjstypescript

Node.js built-ins require shims, while global variable names are absent

After updating my project using npm-check-updates, I encountered a strange error that stumped me. Despite following the suggested terminal command to install polyfill-node, the issue persisted with no resolution in sight online. The error displayed on the ...

node.jstypescriptnpmsvelterollupjs