I have two application which has developed with Typescript. They are server-side and client-side application. I used NodeJs for them. On client-side also used fuseJs for hot-reload feature. But I have a problem I can't debug the client-side application. I'm always writing to console and there is so much "console.log() lines".
I can debug my server-side. But I can't debug client-side.
Here is my fusejs configuration:
const { FuseBox, WebIndexPlugin, CSSPlugin, CSSResourcePlugin } = require("fuse-box");
const { src } = require("fuse-box/sparky");
const fuse = FuseBox.init({
tsConfig: "tsconfig.json",
homeDir: "src",
target: "browser#es6",
output: "dist/$name.js",
plugins: [
WebIndexPlugin({template:'src/dashboard.html'}),
CSSPlugin()],
});
fuse.dev({port:8080});
fuse
.bundle("app")
.instructions(" > main.ts")
.hmr()
.watch();
fuse.run();
I was run my client-side app like: node fuse.js but I read this docs: https://nodejs.org/api/debugger.html then I added "debugger" line to my code and I run it: node inspect fuse.js
But I can't still debugging it. Somebody suggested chrome debug extension but I don't want change my any config or don't want to be reason for it. Is there any other way before try this extension? Can anybody help me?
Related
I have a project that is currently using Laravel Jetstream with Inertia (inertia-vue2). While at first, it was good, but now I have irritated issue that also affects my GitHub actions. When I run, say, yarn dev or yarn prod, then it compiled successfully, it didn't exit immediately unless I press ctrl+c then terminate it. It was fine that I need to do that every time I run yarn dev on my machine (but honestly, I'm not), but this has become the problem on GitHub actions because I can't manually terminate Laravel Mix on the workflow. I was waiting to finish the build step for 3 hours to terminate itself, but it didn't. Any way to fix this? Here's the screenshot and my webpack.mix.js and my webpack.config.js.
This is the 8th time I have run this job, still the same result. Modify the webpack.mix.js, remove the yarn.lock and node_modules on my machine, then push the yarn.lock, still same, I'm running out of ideas.
And here's my webpack.mix.js (and yes, I have PostCSS and SASS, I was intending to going full sass, but since Vuetify is struggling, so at the moment, I'll use the postcss instead for Vuetify stuff, but other than that, I'm using sass)
const mix = require('laravel-mix');
require('laravel-mix-favicon');
require('vuetifyjs-mix-extension');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('autoprefixer'),
])
.sass('resources/sass/print.scss', 'public/css')
.webpackConfig(require('./webpack.config'))
.vuetify()
.sourceMaps()
.favicon({
blade: 'resources/views/favicon.blade.php',
})
.disableNotifications();
if (mix.inProduction()) {
mix.version();
}
And here's my webpack.config.js
const path = require('path');
module.exports = {
resolve: {
alias: {
'#': path.resolve('resources/js'),
},
},
output: {
chunkFilename: 'js/[name].js?id=[chunkhash]',
}
};
Any help would be appreciated. Thanks!
[EDIT]
In Github Actions, I always cancel workflow, and I don't want to wait for three hours++ anymore. This is a pain T-T.
Consider I have been done with my NodeJs with Express and MongoDB Application. I can bundle up my application to deliver the same to client but in that case client have to install all required npm modules and change mongoDB connection url. So to counter this issue:
Is there any other way to bundle my application so client do not need to install any npm modules to run application? If yes, then how client can connect to his mongodb?
pkg by Vercel works really well for me. It bundles everything into a single executable that runs out of a terminal. This makes it really easy to distribute.
To connect to a Mongo instance, you would have to have some kind of configuration file that the user edits. I recommend putting into the user data folder (Application Support on Mac and AppData on Windows), but you could have it sit right next to the packaged executable.
You can use good old webpack by setting it's target. here is an example webpack.config.js file for node:
import webpack from 'webpack';
export default {
entry: "./server.js",
output: {
// output bundle will be in `dist/buit.js`
filename: `built.js`,
},
target: 'node',
mode: 'production',
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
};
Image shows my Project Structure.I am writing back-end for order app in typescript with mongoose database.I am using 'intellij-IDEA' IDE for development. Project run with gulp task runner.I am testing my api's with postman.In some cases, I am unable to track the flow of code from project. I have tried printing with 'console.log()'. But, it has limits. So, help me to debug typescript as it doesn't involve any browser activity.
I was able to get IntelliJ to debug Node Typescript apps while using nodemon as the node interpreter and ts-node as the inline transpiler. No need to pre-compile the code, ts-node does it real-time in memory.
// nodemon.json
{
"execMap": {
"js": "node",
"ts": "./node_modules/.bin/ts-node"
},
"watch": [
"app",
"config"
],
"ext": "js,ts"
}
Then run the Node.JS run configuration in Debug mode, and breakpoints are hit!
If using Linux, change the node interpreter to ./node_modules/bin/nodemon (without .cmd)
You can use node-instpector, it does a good job helping debug NodeJS apps. Here's a good tutorial.
I was trying running intern-client for nodejs server-side application. The terminal error I receive is
"node plugin failed to load because environment is not Node.js"
I tried adding
hasCache: {
"host-node": 1, // Ensure we "force" the loader into Node.js mode
"dom": 0 // Ensure that none of the code assumes we have a DOM
},
configuration to my intern.js config file but no success.
Can anyone please suggest a way to configure intern for node-only apps using dojo.
Thanks
I have a Sails.JS application with Angular.JS front-end.
The angular files are stored in /assets/linker and they are injected properly on start. My issue is that when I change css or js file from assets the change doesn't appear on the server, the loaded js file is the same as when the server started. I tried to clear my browser cache and tried in another browser, but still the same.
I also tried to run the application with forever -w and nodemon, but still nothing. The application is in dev mode, anyway starting with sails lift --dev does not solve the issue neither.
I have feeling that I miss something in configuration. Is there any way to force reloading of assets?
You need to check your Gruntfile configuration. It's where the magic happen in term of linker and livereload.
Specifically, you'll need to look at the watch task and the related tasks.
By default it looks like this :
watch: {
api: {
// API files to watch:
files: ['api/**/*']
},
assets: {
// Assets to watch:
files: ['assets/**/*'],
// When assets are changed:
tasks: ['compileAssets', 'linkAssets']
}
}
I found the problem. I made the Angular.js structure with angular generator
which adds not only the js structure, but also karma test environment containing shell and bat scripts, karma framework and more.
Building sails application with all these files in watched folder is breaking the refresh functionality. There's no errors in console and nothing in the running application, but the files from assets are not reloaded anymore.
Tip of the day: be careful with the files you have in assets and take a look what does generators generate!
I came here looking for livereload, after a little search
Live Reloading
Enabling Live Reload in Your HTML
in current version of Sails v0.10 there is a file for watch task: tasks/config/watch.js