Tired of copying node_modules to wwwroot folder - asp.net

I have an ASP.NET 5 project with a plenty of Node.js modules. They are installed under the node_modules folder.
In the development environment (environment=development), I started copying all the modules to wwwroot\lib manually. When that became tedious, I wrote a Gulp task to copy them. Now there are plenty of tasks.
Is there any ASP.NET project setting so the modules can be loaded from the node_modules folder at the root rather than from the wwwroot\lib?

Edit: For development purposes, just add one more UseStaticFiles middleware. To your Startup.cs -> public void Configure() method -> Add this:
app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions()
{
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), #"node_modules")),
RequestPath = new PathString("/node_modules")
});
UseStaticFiles is used twice. First, to serve static files from a default wwwroot and the second time to serve /node_modules files. As described here.
Just be careful in production environment.

There should be a package.json file in the same directory with that node_modules, you only need to copy it to the new location then run npm install from the command-line to install the packages. Then the new modules will soon be available at the new location.

Related

Next JS manifest files location

Current configuration: NextJS on k8s with multiple pods, running yarn build in the Dockerfile and in the entrypoint script.
Next JS manifest files requested from these paths:
domain.com/_next/static/p3MARTW1_07ma-QzuXQel/_buildManifest.js
domain.com/_next/static/p3MARTW1_07ma-QzuXQel/_middlewareManifest.js
Where p3MARTW1_07ma-QzuXQel is a folder in the pod, and is different per pod because of the second build from the entrypoint. Obviously when the LB hits a different pod its not found.
I couldn't find any info about these files or how can we make this folder name the same across builds.
The manifest files (and other static files) use the generated build ID in their paths. You can configure this build ID in the next.config.js file, which will be the same across all pods using the same build.
module.exports = {
generateBuildId: async () => {
// Return custom build ID, like the latest git commit hash
return 'my-build-id'
}
}
From the Configuring the Build ID docs:
Next.js uses a constant id generated at build time to identify which
version of your application is being served. This can cause problems
in multi-server deployments when next build is ran on every server. In
order to keep a static build id between builds you can provide your
own build id.
Open next.config.js and add the generateBuildId function

Sharing .netcore project between windows and linux Keeps adding files

I am working on a group project and we have decided to use netcore for the project. The project was originally created using VS.
When I pull the project and run it using VSCode, I have noticed two things:
I have to navigate to the src folder and run it from there.
Before pushing new changes to the master branch, .netcore on linux has made changes to obj folder and added .vscode folder.
how can I stop this from happening so we don't step over each others toes, and why does this happen?
Thanks.
You should not add the files under obj to source control. It contains artifacts that are regenerated on every build.
If you use git, here's a suggested list of files and folders to ignore:
[Oo]bj/
[Bb]in/
.vs/
*.xap
*.user
/TestResults
*.vspscc
*.vssscc
*.suo
*.cache
*.docstates
_ReSharper.*
*.csproj.user
*[Rr]e[Ss]harper.user
_ReSharper.*/
packages/*
artifacts/*
msbuild.log
PublishProfiles/
*.psess
*.vsp
*.pidb
*.userprefs
*DS_Store
*.ncrunchsolution
*.log
*.vspx
/.symbols
nuget.exe
build/
*net45.csproj
*k10.csproj
App_Data/
bower_components
node_modules
*.sln.ide
*.ng.ts
*.sln.ide
project.lock.json
.build/
.testpublish/
launchSettings.json

How to use Laravel 5 with Gulp, Elixir and Bower?

I am completely new to all this, 'Bower' and 'Gulp' and Laravel 'Elixir'. I purchased a template that uses them (unfortunately) and now I need some help on how to go about implementing them. I have already installed NPM and Bower. All my packages have been downloaded into:
resources > assets > vendor
This is a screenshot:
Now my question is how do I include all those packages I downloaded in my view? From my understanding I can't run less files directly in the browser, it only runs once due to 'browser caching' or something like that, also the JS scripts are just too many to include in my page.
I want a way where I can work on my files and have them automatically compiled with the compiled files being referenced in my app.php file.
This is a link to the GulpJS file included in my template: http://pastebin.com/3PSN6NZY
You do not need to compile every time someone visits. The compiled sass/js should be run in dev and then the output files referenced.
If you have gulp installed on the project, you should see a gulp.js file in the root of your project. If not, visit here for instructions:
Gulp/Elixer installation and setup
In your gulp.js file:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less([
'app.less',
'normalize.less',
'some-other-less.less',
'and-another.less'
]);
mix.scripts(['app.js', 'some-other-js.js'], 'public/js/output-file.js');
});
While in development you can run gulp watch from the command line to listen for changes and run compile tasks when it hears a change. Then you simply reference the output files in the public directory as you normally would.
If you don't want to listen, you can just run the gulp command for a single once-off task run.
The docs are pretty straight forward and can be found here:
Gulp/Elixer docs

How to tell Meteor to ignore `gulpfile.js`

In my meteor project I want to use gulp for tasks meteor doesn't support.
Anyway, the problem is that gulp uses a file called gulpfile.js which is loaded by meteor too and gives errors. So my question is, is there a way to tell meteor to ignore some files ?
UPDATE: One solution I can think of is to put gulpfile.js in the folder packages or public and run gulp as follows
$> gulp --gulpfile packages/gulpfile.js
UPDATE: Just noticed that meteor also seems to load node_modules files :(
Unfortunately, in the current release there's no way to tell Meteor to leave certain files alone, so you cannot have gulpfile.js in your main app folder.
You can, however, leave it in an ignored subfolder. Meteor ignores files and directories that ends with tilde ~, the /tests directory and all private files (those beginning with a dot .). So you can create a folder named for example gulp~ and use it for your gulp-related stuff.
The same holds for node_modules folder, you cannot have it in your application, and you shouldn't. If you want to use a node package in your Meteor application, you can do this with npm package.
Add it to your project with mrt add npm command.
Then create packages.json file with a list of all required packages, for example:
{
"something": "1.5.0",
"something-else": "0.9.11"
}
Afterwards, include your package with Meteor.require:
var something = Meteor.require('something');
If you want to use a node package in your gulp tasks, install it inside the ignored directory.

What is the Meteor server-side path to /public?

On the Meteor client-side, I know that files in the project's public directory are referenced at '/'.
How are they referenced on the server-side?
I am trying to get a directory listing with fs.readdir, but I don't know how to construct the path to get to the server side equivalent of the client side '/images/gallery'.
Any advice?
The accepted "./public/" answer does not work for me in Meteor 1.1.
However, Meteor supplies the server path via the meteor_bootstrap.serverDir variable, so to get the public folder path I use the following line:
path.join(__meteor_bootstrap__.serverDir, "../web.browser/app");
This works on my local Windows machine and on meteor.com.
Note that this is the "running" version of your public folder, so - at least in development, I haven't checked this part in production - it's actually a merge of your development "public" folder and all of your client-side JS files. If you have a "config" folder in your project, and a "config" folder in your public directory, the "running" path will include the contents of both.
there's an upgrade since the 0.6.5 version of meteor, main.js now chdirs into programs/server in your bundle. So the content of the public directory is here : ../client/app/
the detail on github
I got the absolute path for Meteor project directory using below line of code.
var absPath = process.env.PWD;
I have used this with Meteor 1.4.3.2 and it works perfectly.
When I use the fs-module I just use './public' for my public folder, works fine on my local install.
And then I set it to whatever's correct at the production server using environment vars.
Edit (an example):
This method will return all .HTML files from the public folder:
getHtmlFilesInPublicFolder: function() {
var files = fs.readdirSync('./public/');
var cleanedUpFiles = _(files).reject( function(fileName) {
return fileName.indexOf('.html') < 0;
});
return cleanedUpFiles;
}
If you are using nodes file system library on the client then you are going to be working with your local file system structure and you're files will be referenced by the local path to where ever they reside on your local disk.
For example.. if your project is located at /home/bob/meteor_projects/project1 then your files are located at /home/bob/meteor_projects/project1/public

Resources