Develop Reference

Nuxt3 Robots.txt - #nuxtjs/robots not generating robots.txt file

I'm building a Nuxt 3 project. I need my build to generate a robots.txt file, just like this package states it does -> https://github.com/nuxt-community/robots-module
After running "nuxt build" and/or "nuxt generate", the robots.txt does not appear in the output or public folders as I'd expect.
I'm definitely missing something and likely being an idiot here.. Does anyone know what I'm missing? Here's my code:
package.json
"dependencies": {
...
"#nuxtjs/robots": "^2.5.0",
}
nuxt.config.ts
target: "static",
runtimeConfig: {
NUXT_STORYBLOK_PRODUCTION_KEY: process.env.NUXT_STORYBLOK_PRODUCTION_KEY,
public: {
CDN: process.env.CDN,
NUXT_STORYBLOK_PREVIEW_KEY: process.env.NUXT_STORYBLOK_PREVIEW_KEY,
NUXT_DOMAIN_NAME: process.env.NUXT_DOMAIN_NAME,
},
},
modules: [
...
"#nuxtjs/robots",
],
robots: {
UserAgent: "*",
Disallow: "",
},
}

I just successfully installed this module on Nuxt 3, and I think there are a couple of things to note here.
The first is that I've never managed to get the module options for any module to work in Nuxt 3 the way you have shown (top-level options, according to the module docs):
modules: [
...
"#nuxtjs/robots",
],
robots: {
UserAgent: "*",
Disallow: "",
}
Have you tried the other options? You can also try using the Robots Config file, or pass the options when declaring the module (from the README.md for the repo):
export default {
modules: [
// Simple usage
'#nuxtjs/robots',
// With options
['#nuxtjs/robots', { /* module options */ }]
]
}
The other thing is that I also do not see a generated robots.txt file anywhere after running the build or dev, but if I go to '/robots.txt' in the dev or build preview, I can see the output working as intended. Have you tried visiting the path?
It looks like something the server generates when the route is visited rather than a static file generated on build by default. I think you can change that in the options, but it's not something I need so I haven't dug into it.
Hopefully, that helps somewhat!

You are using an incompatible version of nuxt robots for your project. Ensure you are using version ^3.0.0. Any versions below this are not compatible with nuxt 3.
npm install #nuxtjs/robots#3.0.0
Then ensure your nuxt.config.ts looks similar to below. As John Overstreet mentioned above the simple method appears flawed.
I created a config folder in the root directory of my project and placed my robots.txt file within it:
export default {
modules: [
['#nuxtjs/robots', { configPath: "~/config/robots.config" }]
]
}
You will also need to delete the robots.txt file from your public folder
Build/Generate your project and go to '/robots.txt'
The file is generated dynamically upon request of the above route.
With mine and John's help above I hope this helps resolve your issues :)

VScode sourceMaps detected but not used

Hi everyone !
I'm using VSCode to work on an OpenSource project in monorepo with lerna, and I want to provide a package which contains the tools needed to contribute easily.
In order to do this in a way that seems pretty clean to me, I added my monorepo as a submodule in my workbench package.
Here is a link to my current setup:
https://github.com/Aetherall/accounts-workbench
The main goal of this package is to give to the developper a working debugger configuration, which allows breakpoints and follows the Error stack within the sources of the monorepo packages.
I succeded to make VSCode read my sourcemaps.
Indeed, I switched on the trace options, and I saw in the logs that the .map files were resolved.
But, - and there is my issue - when I trigger an error, instead of leading me to the sources, the debugger just show me the transpiled files...
Here is a sample of my log for one file ( I can provide my whole log if needed to help me )
SourceMaps: sourcemap url parsed from end of generated content:
AuthenticationServicePassword.js.map
SourceMaps.getMapForGeneratedPath: Finding SourceMap for
/home/aetherall/Workspace/github/accounts/accounts-workbench/accounts/packages/Server/Authentication/Password/PasswordService/lib/AuthenticationServicePassword.js by URI:
AuthenticationServicePassword.js.map
SourceMaps.loadSourceMapContents: Reading local sourcemap file from
/home/aetherall/Workspace/github/accounts/accounts-workbench/accounts/packages/Server/Authentication/Password/PasswordService/lib/AuthenticationServicePassword.js.map
here is my debugger config:
{
"type": "node",
"request": "launch",
"name": "Start dev server",
"program": "${workspaceRoot}/config/start.js",
"protocol": "inspector",
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"outFiles": [
"${workspaceRoot}/dist/**/*.js",
"${workspaceRoot}/**/lib/**/*.js",
"!**/node_modules/**/*",
],
"skipFiles": ["${workspaceRoot}/node_modules/**/*", "<node_internals>/**/*.js"],
"smartStep": true,
"trace": "sm"
},
I am using webpack to bundle the workbench package (not the monorepo) and tsc to transpile the typescript packages in javascript with sourceMaps in my monorepo submodule
I can of course add more informations if needed
Thanks for helping me on this one !
I really can't get why sourceMaps arn't used by the debugger ...
If you do have a solution, please give me some explanations on the problem

I found a solution to my issue :
Source Map loader for webpack
this way, the sourcemaps of the files imported and transpiled will be resolved within webpack.
https://github.com/webpack-contrib/source-map-loader

How to add a new file type to vscode

I have a project which uses Mustache template engine and the file extension name is xxx.ms. I want to make this syntax highlighting. Then I did the following.
I install the Handlebars extension of vscode. And edit the config file ~/.vscode/extensions/andrejunges.Handlebars/syntaxes/handlebars.tmLanguage as the following.
But although I restart vscode, it still doesn't work. So I wonder how does vscode detect a file extension and use the corresponding extension installed to highlight the syntax.

You need to add the file extension also to the package.json file which is located in the root folder of the extension. Look for something like this:
"contributes": {
"languages": [
{
"id": "mylanguage",
"extensions": [
".mylang",
".myl" // add the file extension here
]
}
]
}

Open settings.json and add:
"files.associations": {
"*.ms": "handlebars",
}

Visual Studio Code configuration to run MEANJS workflow

I just installed Visual Studio Code and I'm trying to run my MEANJS application within the IDE, VisualStudio created a ./settings folder with a launch.json file which contains the configuration to run the project.
What I usually do using the MEANJS workflow is just to type grunt in the root folder of the application and the command to call the gruntfile.js which contains all the jobs to launch my application.
I want to try to achieve the same in Visual Studio Code by pressing the button play, and run the grunt tasks, but I have no idea where to start.
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch Project",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "gruntfile.js",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 3000,
"sourceMaps": false
}
]
}
Any recommendations?

VSCode EXAMPLE
You can setup any workflow tool with Visual Studio Code and use CTRL+SHFT+P then RUN and select TASKS. You can also set default BUILD and TEST tasks with CTRL+SHFT+B and CTRL+SHFT-T respectively. As long as the task runner Gulp, Grunt, Cake or other is setup properly VSCode can be configured.
You can set all of your Gulp or other task runner tasks in VSCode each by name or setup only a few that also run the other sub tasks.
As of VSCode 0.5.0 there is a problem with task arguments that requires them to be reversed in the tasks.json file. More info here
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "vet",
"isBuildCommand": true,
"isTestCommand": false,
"showOutput": "always",
"args": [],
"problemMatcher": [
"$jshint",
"$jshint-stylish"
]
},
{
"taskName": "vet-es",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": [],
"problemMatcher": [
"$eslint-compact",
"$eslint-stylish"
]
},
{
"taskName": "--verbose",
"isBuildCommand": false,
"isTestCommand": false,
"showOutput": "always",
"args": [
"vet"
],
"problemMatcher": [
"$jshint",
"$jshint-stylish"
]
},
Notice the first two tasks have isBuildCommand and isTestCommand set to 'true' which permits keyboard shortcuts mentioned above. The last task needs to have the argument and command name reversed, as of VSCode 0.5.0, in order to work. See this link.
USING VSCode Debug
You can you VSCode Debugger to Run Node.js apps and Start with the
Play button and restart with the Circular Arrow. For that you need to configure your launch.json. If you just want to start/restart the app without debugging then set stoponentry to false. I usually have two, one for debug and one for run.
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Debug src/server/app.js",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "src/server/app.js",
// Automatically stop program after launch.
"stopOnEntry": true,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Run src/server/app.js",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "src/server/app.js",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
RUNNING NODE APP WITH GULP
You can also use Gulp or another task runner to start and auto restart your node.js app among many other things. I prefer Gulp due to it's code over configuration setup and and the fact that it inherently uses streams.
There is another file called gulp.config.js that's referenced by gulp.js that contains various static variables and functions that not shown hence the references to config throughout the gulpfile.js. Here's the require statement:
//require containing config variables and run
var config = require('./gulp.config.js')();
Following is a gulpfile.js that I used while taking a Plurasight Course taught by John Papa. In the configuration many tasks are defined including Gulp Task SERVE-DEV which runs the node server app, auto restarts the server on js, css or html changes and syncs multiple browser views, injects CSS and JS, Compiles LESS, among other tasks.
GIST LINK FOR GULP FILE
The Gulp file was too complex to be interpreted by the Stack Overflow markup so I add this GistBox Link.

In the task.json file replace these settings
{
"version": "0.1.0",
// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
"command": "grunt",
// The command is a shell script
"isShellCommand": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// args is the HelloWorld program to compile.
"args": ["serve"]
}
You can leave the "serve" argument out if your grunt file dose not have it.
However this will not run pressing the green start button.
In order to launch this task you need to press
Ctrl + Shift + P
From there you can use the Task commands.
It is possible to set-up and run Tasks with keyboard short cuts.
Update: I did not find how to do it in Visual Studio Code, but in WebStorn it is an easy set-up that requires just a couple mouse clicks.

Instruct Sencha SDK tools to bundle other js files specified in app.json

My app.json file of a Sencha touch 2 application contain.
"js": [
{
"path": "sdk/sencha-touch.js"
},
{"path": "js/mootools-1.2.5-core.js"}, // I want these files to be bundled too
{"path": "js/mootools-1.2.5.1-more.js"}, // <----------+
{"path": "js/soundmanager2-nodebug-jsmin.js"}, // <----+
... // <----+ and there are more.
...
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
},
Now I see when I invoke sencha app build production It compiles all the sencha classes into a giant app.js file. But all my other classes are just compressed to build directory. They are not concatenated. how can I include them in app.js?
F.A.Q.
Your json file is properly written, right?
A. Yes, app.json is written without any syntax error. The project builds successfully on invoking sencha app build production

After looking at the source code and talking with the devs behind Cmd, it appears that it is currently not possible.
However, because the build file is written in JavaScript, in theory, it wouldn't take much to modify it and add this functionality into Cmd.
You can find the Sencha Touch build file in:
CMD-ROOT/plugins/touch/current/app-build.js
Where CMD-ROOT is the location of the sencha command - which you can find out by using which sencha.
On my system (OSX), the path is:
/Users/Robert/bin/Sencha/Cmd/3.0.0.250/plugins/touch/current/app-build.js
Hopefully this is of some help to you.
Update
It appears that, after talking to another Cmd developer, this actually is possible. There are 2 steps you need to take to make it happen:
1) Add the skipFrameworkFile property into each JS resource you want to bundle. This tells the compiler to not copy the resource when your build your app.
{
"path": "resources/js/jquery.js",
"skipFrameworkFile": true
},
"path": "resources/js/jquery2.js",
"skipFrameworkFile": true
}
2) Require each of the files in your app.js file using the #require tag. This tells the compiler to include each of your files into your app.js file.
//#require resources/js/jquery.js
//#require resources/js/jquery2.js

For SenchaCmd 3.2, rdougan's solution didn't work for me. However, instead of using:
'skipFrameworkFile: true
I used
'x-bootstrap': true
(by looking at SenchaCmd source code) and it worked!
The other steps are the same as rdougan's
Hope this helps. Cheers