javascript: Run / Execute from Atom in Browser - javascript

While trying to learn javascript, I stumbled upon Typescript and decided to rather learn that. I installed Atom and the atom-typescript module and coded a typescript class, which compiles to a .js file. I created an index.html page with the .js in a script tag.
As far as I understand, in order to test the js code, I have to start a webserver and load index.html.
What would be a convenient way to do that? At least, I would like to manually run the script from Atom with a keyboard shortcut. Ideally, I would like the browser to refresh every time the typescript file changes in Atom.
No google result I could find explains how to do that, is that a difficult thing to do?

What would be a convenient way to do that?
Use browserify to reload your webapp everytime the JS changes. Also use nodemon to restart your webserver each time the backend JS changes.
Example:
Checkout http://typescriptbuilder.com/
Nodemon config:
https://github.com/TypeScriptBuilder/tsb/blob/master/nodemon.json
Wepack config:
https://github.com/TypeScriptBuilder/tsb/blob/master/src/webpack.config.ts
Webpack config during devtime:
https://github.com/TypeScriptBuilder/tsb/blob/8a7d48d71a8327d48822fa15eb52b9adb1953223/src/server/devtime.ts#L15-L82

Related

Not able to fork external JavaScript server file in Electron

so I am making an application that requires a backend API, and it uses certain node_modules which don't work when compiling with Electron. To fix this, I put the API code into a separate JavaScript file, which I am attempting to fork using child_process.
I have gotten this to work when compiling, but it immediately stops working after I move the "win-unpacked" folder or try to install the app using the compiled installer.
I have checked, and it is not the path that is wrong, it is correctly pointing to the file. From testing, it appears that the file actually does get forked, but immediately exits with the status code 1.
I can't use require(./filepath.js) because that will just include the code in the compiler, which doesn't work with the modules I am using.
I am hoping someone knows what is wrong and what I should do to fix it, or have any ideas for other ways to run the server code without including it in the compiler.
I am using Vue.js 3 and vue-cli-electron-builder version 2.1.1
The server I am attempting to run is a express server.

How many times a TypeScript file compiles?

I want to study typescript and start to build my idea by using MEAN technology stack but I am afraid that typescript needs to be run every time a user enters the website or it is only one time?
You build your project once using the TypeScript compiler and that produces .js files that can be run directly in nodejs or the browser (depending upon which environment they were designed for).
This is one-time process. From then on, the only code that actually "runs" is the compiled output .js files.
So, NO TypeScript code does not need to be re-compiled every time a user enters a web-site.
Your code would typically be recompiled only when you modify it and wish to "build" the newer version of your code.
Typescript compiles to JavaScript when you run the ng build and it also optimizes codes. After build completes you will have an index.html plus .js files that each one is generated based on one of your lazy loaded modules.

How to enable hot reloading for the build folder in create-react-app?

I have a React application created using create-react-app. I also have an external application that is using this application by including the bundled JS and CSS files (the ones create using the build script).
Right now, I'm using the React template created by the dotnet new command, and I have configured the server to serve static files located in the build folder.
For this reason, I have created a couple of additional NPM scripts that rename the bundle files (remove the hash from the name), so that I don't need to update my external application's links with every build.
Right now, whenever I change something in the code, the whole build process has to be processed to create the two files.
I have created a "watch" task to run my build scripts whenever I have a change, but I was wondering if there is a way to speed up the process and somehow configure the React application to be served from memory or something just like when we "normally" run the application.
So, maybe a couple of questions:
How to achieve this in a "normal" React app created by create-react-app?
how to achieve this in the context of the dotnet template?
you can use nodemon in the build folder of the create react app.
as the documentation says
By default nodemon monitors the current working directory. If you want to take control of that option, use the --watch option to add specific paths:
so you can use something like this:
nodemon --watch app --watch libs app/server.js
for details try other approaches given here
This could be due to your filesystem, file extensions or the Create-React-App default webpack/project configuration. You don't necessarily have to change all of this because hot-reloading is supposed to work out of the box, and more so if the project has just started.
For example, I once had an issue with a Typescript installation(^17.0.1) where some files with extension .ts will not trigger hot reloading. I had to change to .tsx and add a React import. The same could happen with .js and .jsx files.
In case of problems with your filesystem (Unix, Mac) you can try the React config (FAST_REFRESH=false) here... or changing folder names, but I haven't bumped much into this.

How can I init and use i18next plugin in website project?

After reading the document of i18next, I am still confused about how to init & use it in both navigator auto detecting way and event trigger way.
Do I need to include it with <script> tag again if I have had npm install it?
Totally novice in npm, thanks for helping me out!!!
To use libraries installed with NPM in the browser, you traditionally need to use a build tool like Browserify or Webpack. Asking how to use an npm library in the browser is too broad of a question for StackOverflow.
If you aren't familiar with those tools and want to get up and running quickly, you can just include browser ready Javacript file in a script tag. Hit the "Raw" button, download the file, then include the downloaded file in your project like any other script file.

Inject Browser Sync script using the CLI

I'm using the Browser Sync CLI to serve some basic html/css/js files and it is telling me to manually include the js script in the html files.
If I was running this with node I could use the bs-snippet-injector plugin, but it doesn't look like I can use plugins with the command line tool.
I'm trying to keep this as simple as possible.
I figured it out, I wasn't using the --server option; I included that and it works as expected.

Categories