nextjs+Dockerfile: env variables pass to nextjs.config.js - next.js

I have a next.config.js
module.exports = {
.........
env: {
BASE_URL: 'http://xx.xx.xx.xx:8000',
},
............
};
Now I want to change the BASE_URL while building docker image
my Dockerfile file
FROM node:16-alpine3.14
WORKDIR /usr/app
COPY ./package.json ./
RUN yarn install
ENV BASE_URL=http://yy.yyy.yy.yy:80
# Copy all files
COPY ./ ./
RUN yarn build
So passing ENV BASE_URL=http://yy.yyy.yy.yy:80 in Dockerfile will it help to change the BASE_URL: 'http://xx.xx.xx.xx:8000' in the next.config.js
Or what the way i can change the BASE_URL

ENV BASE_URL=http://yy.yyy.yy.yy:80 in your docker file will set an environment variable BASE_URL to it's value, you need to read it for that variable.
//next.config.js
module.exports = {
.........
env: {
BASE_URL: process.env.BASE_URL || 'http://xx.xx.xx.xx:8000', //read the value from env id empty use default value.
},
............
};

Related

Multi theme nextjs

I am building a multi theme application as it will be deployed on different urls using different themes.
My idea was to use an env variable, in my case APPLICATION_VERSION which can be v1, v2 or v3
I am passing the variable to my sass using next.config.js
const { i18n } = require('./next-i18next.config');
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
i18n,
sassOptions: {
prependData: `$theme: ${process.env.APPLICATION_VERSION};`,
},
env: {
APPLICATION_ENVIRONMENT: process.env.APPLICATION_ENVIRONMENT,
APPLICATION_LOCALES_KEY: process.env.APPLICATION_LOCALES_KEY,
APPLICATION_VERSION: process.env.APPLICATION_VERSION,
}
}
module.exports = nextConfig
Then in my scss I created a mixin
#mixin isTheme($value) {
#if $theme == $value {
#content;
}
}
In local this is working with some issues, when I am changing the APPLICATION_VERSION value I have to edit all my *.module.scss files so the isTheme mixin is taken into account.
I tried to deploy it with vercel and seems that the isTheme mixin is ignored
This is my build script where vars are passed
#!/bin/bash
rm package-lock.json
npm i
node ./bin/locales.js
npm i -g vercel
DEPLOYMENT_URL=$(VERCEL_ORG_ID=$VERCEL_ORG_ID VERCEL_PROJECT_ID=$VERCEL_PROJECT_ID vercel --confirm \
--token $VERCEL_TOKEN \
--build-env APPLICATION_ENVIRONMENT=staging \
--env APPLICATION_ENVIRONMENT=staging \
--build-env APPLICATION_VERSION=$APPLICATION_VERSION \
--env APPLICATION_VERSION=$APPLICATION_VERSION \
--regions fra1 )
vercel alias set $DEPLOYMENT_URL $APPLICATION_URL -t $VERCEL_TOKEN --scope $SCOPE
But when deployed threw vercel the content of isTheme mixin is not displayed

unable to exclude node_modules from the folder_project

I have 2 folders named as rsync & folder_project one at path D://rsync and other at path D://project/project1/folder_project.
folder_project contains the .ignore file which contains the path for node_modules present in folder_project.
I am syncing my local files to remote machine, so I have created the rsync command in the rsync folder with a config file.The files in rsync are as follows:
rsync --> config.js node_modules ltor.ts
config.js
module.exports = {
Inputs: {
source : '../project/project1/folder_project',
destination:'ec2-user#xx.xx.xx.xx:/home/ec2-user/',
ignore: '../project/project1/folder_project/.ignore'
}
}
ltor.ts
//all imports are done.
function puts(error, stdout, stderr) { console.log(stdout) }
var onChangeFn = function (watch_directory, destination_directory, ignoreFile) {
var command = 'rsync -avzH -e "ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null" --progress --delete --exclude-from=' + ignoreFile + ' ' + watch_directory + ' ' + destination_directory;
exec(command, puts);
}
Question: My rsync command is ignoring node_modules from the present or current directory, I want to exclude the node modules from the folder_project directory.
How can I achieve this?

Grunt run task for another Grunt file

I have 3 separate apps in 3 different folders. e.g. folder1, folder2 and folder3. folder3 is the combination of folder1 and folder2. Right now, I run dist task on both folder1 and folder2, then with bower link I link those dist folders with in folder3. Is there any way I could run a task with in folder3 that will create dist on folder1 and folder2, and link them with folder3? In short I want to run grunt task of folder1 and folder2 from folder3 and link them.
grunt.config.set('exec', {
loginapp: {
command: 'grunt -b C:/project/loginapp dist'
}
});
grunt.registerTask('all', [
'exec:loginapp'
]);
Folder structure
c:\project
----loginapp
dist
GruntFile.js
----webapp
public
bower_components
dist-loginapp
GruntFile.js
Hope this helps. I am in webapp > GruntFile where I run dist and that should run dist task on loginapp before its on dist task.
You can use -b flag to specify an alternate base path where there is a Gruntfile.
Then use grunt-exec to create task that run grunt task of your other projects.
E.g :
module.exports = function(grunt) {
grunt.config.set('exec', {
distFolder1: {
command: 'grunt -b relative/path/to/Gruntfile/of/folder1 taskName'
},
distFolder2: {
command: 'grunt -b relative/path/to/Gruntfile/of/folder2 taskName'
},
});
grunt.loadNpmTasks('grunt-exec');
};
Now you just have create a register task that run these two task and you other task.
E.g :
module.exports = function(grunt) {
grunt.registerTask('distAndLink', [
'exec:distfolder1',
'exec:distfolder2',
// your other task (bower link)
]);
};
and then run grunt distAndLink from folder 3.

Task not found when grunt is run using load-grunt-config

I am learning Grunt and want to use load-grunt-config to start with. Here is my code :
Gruntfile.js
module.exports = function (grunt){
var path = require('path');
require('load-grunt-config')(grunt, {
configPath: path.join(process.cwd(), 'grunt-tasks'),
});
grunt.registerTask('install',['test']);
};
I have grunt-tasks folder in root directory of my project along with Gruntfile.js and in that I have included test.js
test.js
module.exports = {
test :{
local : {
}
}
};
Now when I say grunt install from command line and using CWD as my project's root directory I get following error :
Warning: Task "test" not found. Use --force to continue.
and when I include following segment in Gruntfile.js
loadGruntTasks : {
pattern : '*'
}
I get following error :
>> Local Npm module "load-grunt-config" not found. Is it installed?
Warning: Task "test" not found. Use --force to continue.
May I know what I don't understand here?

how to dynamically build watch task's targets?

using gurunt syncall, I want to dynamically sync every dir(and new dir created in the futrue) in project root except 'node_modules' dir to another dir.
using grunt watchall, I want to watch those dirs, when there are some changes in a dir, I want to automaticlly run the corresponding sync task.
here is my project root's structure:
├── Gruntfile.js
├── addon1
│   └── a.toc
├── adon3
│   └── 3.toc
├── node_modules
│   ├── grunt
│   ├── grunt-contrib-watch
│   └── grunt-sync
└── package.json
the grunt syncall command is ok, here is the result:
➜ testsync grunt syncall
Running "config" task
Running "sync:addon1" (sync) task
Running "sync:adon3" (sync) task
Done, without errors.
but the grunt watchall not ok. can you tell me why watchall tasks not work and how to fix it?
I start the command, and change and save the file '3.toc' in dir 'adon3', then grunt say:
➜ testsync grunt watchall
Running "config" task
Running "watch" task
Waiting...
>> File "adon3/3.toc" changed.
Running "sync:adon3" (sync) task
Verifying property sync.adon3 exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sync.adon3" missing. Use --force to continue.
Aborted due to warnings.
here is my Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({});
var destdir = "/Users/morrxy/project/testdest/";
// dynamic config sync and watch's targets for every dir except for node_modules
grunt.registerTask('config', 'config sync and watch', function() {
grunt.file.expand({filter: 'isDirectory'},
['*', '!node_modules']).forEach(function(dir) {
// config sync's targets
var sync = grunt.config.get('sync') || {};
sync[dir] = {
files: [{
cwd: dir,
src: '**',
dest: destdir + dir
}]
};
grunt.config.set('sync', sync);
// config watch's target
var watch = grunt.config.get('watch') || {};
watch[dir] = {
files: dir + '/**/*',
// is next line has problem?
// running 'grunt watchall'
// when I change and save the file '3.toc' in dir 'adon3', terminal say:
// >> File "adon3/3.toc" changed.
// Running "sync:adon3" (sync) task
// Verifying property sync.adon3 exists in config...ERROR
// >> Unable to process task.
// Warning: Required config property "sync.adon3" missing.
// but why 'grunt syncall' can work?
tasks: 'sync:' + dir
};
grunt.config.set('watch', watch);
});
});
grunt.loadNpmTasks('grunt-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('syncall', ['config', 'sync']);
grunt.registerTask('watchall', ['config', 'watch']);
};
Finally, I solved this problem. I add a github repo for this question. If you want test, you can clone it run it locally. https://github.com/morrxy/dynasync
The reason watchall can watch files changes but can't run the corresponding sync task is that when watch find files changed, the config for each sync is finnished running, so the config for that sync target is gone, we didn't save the running config any where. So to solve this problem, we could add the config task into the watch task before the sync task, like this tasks: ['config_sync', 'sync:' + dir].
in new Gruntfile.js, I split the config task to two task, one for config watch, one for config sync, in the watch task, using the config sync task. Here is the new Gruntfile.js
module.exports = function(grunt) {
var destdir = "/media/data/projects/dynasync_dest/";
grunt.loadNpmTasks('grunt-sync');
grunt.loadNpmTasks('grunt-contrib-watch');
// dynamic config sync's targets for every dir except for node_modules
grunt.registerTask('config_sync', 'dynamically config sync', function() {
grunt.file.expand({filter: 'isDirectory'},
['*', '!node_modules']).forEach(function(dir) {
// config this dir's sync target
var sync = grunt.config.get('sync') || {};
sync[dir] = {
files: [{
cwd: dir,
src: '**/*',
dest: destdir + dir
}]
};
grunt.config.set('sync', sync);
});
});
// dynamic config watch's targets for every dir except for node_modules
grunt.registerTask('config_watch', 'dynamically config watch', function() {
grunt.file.expand({filter: 'isDirectory'},
['*', '!node_modules']).forEach(function(dir) {
// config this dir's watch target
var watch = grunt.config.get('watch') || {};
watch[dir] = {
files: dir + '/**/*',
// this line solve the problem
// when find file change, first dynamically config sync and then sync the dir
tasks: ['config_sync', 'sync:' + dir]
};
grunt.config.set('watch', watch);
});
});
grunt.registerTask('syncall', ['config_sync', 'sync']);
grunt.registerTask('watchall', ['config_watch', 'watch']);
grunt.registerTask('default', ['watchall']);
};
This time, when watch find file changes, it can run the corresponding sync task. like this
grunt watchall
Running "config_watch" task
Running "watch" task
Waiting...
>> File "adon3/3.toc" changed.
Running "config_sync" task
Running "sync:adon3" (sync) task
Done, without errors.
Completed in 0.888s at Thu Apr 10 2014 14:01:26 GMT+0800 (CST) - Waiting...

Resources