Change grunt serve default path - gruntjs

I use grunt-serve and access the files that it serves through
localhost:9000, I want to change that to
localhost:9000/mypath
I read on the documentation that I can do the following
'serve': {
'path': '/Users/user/Documents/workspace/project'
}
But I don't know where to put this options.
I have found a similar question but no answers.

The configuration block for the grunt-serve plugin should reside (as with any other task configuration) in the config object passed to grunt.config.init, e.g.:
grunt.config.init({
serve: {
path: '/Users/user/Documents/workspace/project'
},
// ...
});

Related

Env vars are undefined in Nextjs v12.0.8

I created a .env.local file and tried to console process.env.TEST (test env var) but I'm getting undefined. It seems process.env is always empty.
I restarted the server but I still don't see the env vars. I even tried to start a new empty project and process.env is still empty.
Am I missing something? All the other posts I see seem to have figured it out but I still can't.
My .env.local file is on the root level. I also tried to append the var with NEXT_PUBLIC, but that didn't help.
By convention, React env variables must be prefixed with REACT_APP_ in order to be used with process.env. In the case of Next.js, you can put them in the .env.local, but they would only be available in the Node.js environment. If you need to make them available in the browser, you need to prefix them with NEXT_PUBLIC_.
Refer to the documentation for more details.
Another way (more old school Next.js) would be to have a next.config.js file.
A possible config would be:
const conf = {
env: {
myVar: process.env.MY_VAR,
},
};
module.exports = conf;
Then you could simply use process.env.myVar inside your code. See this page for more information.

How to start react app on custom port with CRACO?

I want to use Tailwind CSS for my react apps. The problem is CRACO start starts the app on the default port, which is 3000 and I want to have custom ports but I can't figure out what is the right approach. ( Can't find anything about this in their documentation )
I tried something like PORT=5000 CRACO start inside the scripts field of the package.json file but doesn't work.
Any idea?
The accepted answer contains links to the relevant information, but in case they become invalid or you are too lazy to look at them here is the config you need to add to your craco.config.js file.
module.exports = {
devServer: {
port: 5000
}
}
Note that devServer is a top level property in the config.
CRACO use the webpack devserver configuration to set the port.
you need to create a configuration. read more here in the readme:
https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration-file
So you solution need to redefine devServer. How to define it read in the webpack documentation:
https://webpack.js.org/configuration/dev-server/#devserver

Access variables in NextJs

I want to use variables in NEXTjs application. For this i did:
created file: .env.local with:
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
And i want to access this: console.log(process.env.DB_HOST, 'local variables') When i do this i get undefined. Why it happens, and how to get the variables?
If you want to access to your environment variables on client side and server side, they must be prefixed with NEXT_PUBLIC
NEXT_PUBLIC_DB_HOST=localhost
NEXT_PUBLIC_DB_USER=myuser
NEXT_PUBLIC_DB_PASS=mypassword
if you are going to use them only on the server side, then your example will work
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
If you are using nextjs higher than 9.4 you can use next.config.js
Snippet from nextjs documentation
https://nextjs.org/docs/api-reference/next.config.js/environment-variables
To add environment variables to the JavaScript bundle, open next.config.js and add the env config:
module.exports = {
env: {
customKey: 'my-value',
},
}

How to access the image files in jhipster app

JHipster i using the webpack to serve static files to users, but in my app i want images to load asynchronicly without webpack.
If i understand webpack correctly it is including all files that match the regexp and bundles them.
And any image file that lies in webapp folder will be included
This is the standart image-loader conf for jhipster app.
{
test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', {
loader: 'image-webpack-loader',
query: {
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
}
}
}
]
}
I store the images url in database and wanted to use the spring resource handler to get the images.
Can anyone please tell me what is the correct way of writing the static resource path for jhipster defoult configuration.
I tryed to use /content/webapp/images/ ...
But it does not seem to work which is strange considered that all static files are located there.

grunt-contrib-connect not serving files from my specified base

I have a very simple configuration for grunt-contribu-connect in my Gruntfile.
connect: {
dev: {
base: 'dist'
}
},
The task runs and is kept alive by my watch task, but, whenever I try to open a page from this base directory, I get error output instead of the desired page.
Cannot GET /odds.html
In this image, you can see my project structure. The Gruntfile is at the project base, and the odds.html file I want to open is in the dist folder relative to that.
Here, you can see the error along with the URI I'm trying to hit.
I'm sure I'm overlooking something silly, but I cannot see it. Please help! Thanks.
I believe that you need to add 'options' and/or 'keepalive' as follows.
connect: {
dev: {
options: {
base: 'dist',
keepalive: true
}
}
},
I hope this helps you.

Resources