Next JS manifest files location - next.js

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

Related

Global deno.json configuration file?

I want to apply this deno.json configuration file to all my deno projects:
{
"fmt": {
"options": {
"indentWidth": 4
}
}
}
Is there a way to globally apply this configuration so I don't have to have this deno.json file in every project?
I'm using VSCode, Ubuntu and Deno 1.28.1.
Because of the way that the Deno VS Code extension overrides/suppresses the built-in TS language server, it is not advised to enable the extension globally: this would cause problems in every non-Deno TypeScript project.
That said, you can create a single deno.json(c) file at a high-level location in your filesystem — for example: in your home directory. To use a concrete example location — on Linux — /home/your_username/deno.json.
Then, when configuring a new VS Code project, you only need to configure the location of the config file in .vscode/settings.json in order for the extension to use it:
{
"deno.enable": true,
"deno.config": "/home/your_username/deno.json"
}
When using Deno in the CLI, it will automatically walk your filesystem and find the nearest parent config file. From the manual:
Since v1.18,
Deno will automatically detect deno.json or deno.jsonc configuration file if
it's in your current working directory (or parent directories).
Regardless of the above, this strategy is not advised: a better approach might be to simply to create a personal CLI script/function which will generate a new deno config and VS Code config from a template that you create. This way, each of your projects maintains its own configuration data (a good thing) and you also don't have to manually configure each new one because you did the work once to create the template generation script (win-win).

How to delpoy Vue project to production?

Using Ubuntu 16.04 and Nginx I am trying to deploy a Vue project to production but keep running against a white wall- literally.
I cloned my project to
/var/www/html/maak-web/maak_web/
Installed all needed dependencies with npm install and ran the following build script:
node build/build.js
This started the building for production which was successful and the project deployed.
In my nginx default config I changed the root to point to the correct folder like so:
root /var/www/html/maak-web/maak_web;
When I now visit my domain/IP I see that the project loads (e.g. favicon and site name loads) as well as I can access my static files from here:
https://mysitedomain.com/static
It seems the Vue project works but the problem is that it doesn't actually display anything and visiting sub views like /oneview and /anotherview throw 404 page not found errors.
Since Vue doesn't seem to throw any errors I suspect its the nginx configuration problem!?
The solution was to build the production into /dist/ folder and publish only the /dist/ folder content. Once I copied the content to /www/html/ it worked fine.
seeing that this was an error with not getting the right files to the output folder, i suggest you update your config/index.js file to include the correct production location there by setting index and assetsRoot for the build object
build: {
// Template for index.html
index: path.resolve(__dirname, '../../srv/www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../srv/www'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
...

Tired of copying node_modules to wwwroot folder

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.

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

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