I am very very new to nodejs. I have this application that I have downloaded from github. It is using Gulp for building. I tried that it worked and I now have the exe file. What I really not able to find out is how can I run the application so that I can do the some customization in the app. I really need do few customizations. I dont think its very productive to build the app every time you do a slight changes in the javascript or css. I am trying https://github.com/butterproject/butter-desktop. How can I run this in browser and be able to do minor changes in javascript that reflect in the browser right away ?
Related
I'm using Express as the server and nodemon to reload that server on file changes. Works perfectly. But when I make a frontend change (i.e changing an html page or css, javascript, anything basically) I have to reload the browser manually. If you're like me, that isn't ok. I know of the vscode extension "Live Server", but I want it all to be in that one express server. I tried using the live-reload npm package, the app and the browser extension, but that didn't work out for me. I really don't want to have to start to use something like webpack just so I'm saved the effort of pressing Ctrl+R a couple times. Any recommendations? I still haven't learned React but I've heard that if you use React, then you'll have that live reloading feature. I'm actually currently developing a typescript website template, so that's what I want to use it for.
From what you've said and after a little searching maybe samuelgjabel/nodejs-hot-reload is what you're looking for?
It supports typescript and where you don't want to roll your own / learn webpack at the moment, this seems like it would keep things simple.
*disclaimer - I haven't used the library myself and cannot attest to it's security or quality.
update:
Regarding your comment response, My mistake I misunderstood.
This library works on the front-end providing the auto (CTRL-R) you're looking for. try this guide for connect-livereload
It seems to hook into express' connection event to signal the browser for a reload after nodemon has respawned the server instace. The guide shows how to implement it without a build tool like gulp/grunt.
I built my first javascript app using HTML and CSS as well. It is a basic tip calculator. I've pushed my code to my GIT but when i click on website deployed its just the README file. I have a feeling I need to use Node.js but after the basic reading I did on it I have no idea how to accomplish this. I just want to push the app to heroku or even just off the GIT page to see it in action on another device.
I tried running npm init and it created a package.JSON but every time i pushed to heroku the app would crash and give me an error stating it can not find the "start" script i input.
here's my github for the app, https://github.com/jaronow/tip-calculator. I would appreciate some basic guidance or a link to somewhere i can learn how to accomplish this task
You don't need to use Heroku for a one page web app like yours. You can host it directly on Github using GitHub Pages. You want to choose the "Project Site" instructions. Pay attention to selecting the "source" when you go through the steps. You'll want to specify your html/main.html file.
Also, looking at your code, you should consider renaming your "java" folder either "js" or "javascript" or something similar. Java is a different language and naming it that is confusing.
You do not need to use NodeJS for this project because there is nothing that runs on the server side. Everything runs in the browser: the HTML, CSS, and JavaScript.
In order to deploy to heroku , you would have to use Node and you will have to set up a basic server to serve your static assets such as the HTML , Images, and CSS.
To deploy or host your app you can use Github pages, I am not sure if you have ever heard of it.
Here is this link: https://pages.github.com/
on the page it should have a step-by-step guide on how to host it.
I built an application using Ionic 4 for my android device and it runs pretty well. For some reason I lost the source of the project (not completely but most of it), so now the only possible way to retrieve it without completely rewrite it is to use the code inside the apk.
I managed to get it from the device, extract the content and locate the www folder which is obviously not that readable.
I would like to find a way to revert the build process that build the javascript from the typescript.
Any suggestion?
I've build a project with pure reactJS using create-react-app and I successfully uploaded the app to my server but unfortunately I've lost my laptop and all of my data :( but my project working on the site my question is:
Is it possible to get my project back again to development mode through existing files?
You may be able to use https://github.com/1egoman/debundle to un-bundle the index.js file (in the case of create-react-app, Webpack is the bundler). If the bundled file was built in production mode, you may need to use something like https://www.npmjs.com/package/unuglify-js to get it back in somewhat readable order.
Sorry to point you to libraries which may or may not work, but the truth is that you may be better starting from scratch--the real knowledge in your mind, not in the source code. You may be able to throw in some improvements the second time around... look at the bright side!
solution in here: Can I use a sourcemap and bundle file to retrieve original react code
THIS IS 90% fix.
Publish the APP so you can access it through browser (e.g. NETLIFY, can publish by accessing your Git repo) -> open the published project in the browser -> then inside the browser press ctrl + shift + i (chrome and pc).
This gives you access to developer tools.
Find: SOURCES TAB
on left hand side you will see folder structure -> click into STATIC
Now you can see all CONTENT inside JS files and CSS by clicking on them.
You can now either copy and paste them into you IDE or download them by right clicking them and Save As.
I'm trying to figure out how to set up a JavaScript development project that will allow me to factor my code into several files. I plan to run this eventually on a client web browser, but first I need to set up an efficient development environment.
I've used other programming languages before that let you keep a large number of files in a subdirectory and then let you compile everything into your final deployable (or have an interpreter do something similar). Javascript doesn't seem to allow this - I have to manually add a <script> tag for each js file to the head of my web page to get the browser to load it. This can get very hard to manage once you have more than about 10 files that you need to keep track of. It would be nice if I could write <script src="myscripts/**/*.js"> to suck in everything, at least during development time.
I've found Grunt 'uglify' which looks like it would be a handy tool for creating a final file for deployment, but during development I need to keep everything separate so I can debug properly. Is there any way to have my web page load every js file in my development directory?
As others have mentioned in comments, Webpack (or similar) is the way to go. It bundles up all of your relevant code, and can also process it for minification.
I want to address this comment though:
but during development I need to keep everything separate so I can debug properly
You don't need, or want, that. While developing, you want to be testing against the same sort of build process you'll use in a deployment later. So, how can you easily debug your compiled scripts? There's a .map file that gets built, which tells the browser what your original code looked like.
Chrome and other browsers will automatically load and parse this file when you open your developer tools. Then, you'll be able to see the original source code (and in the original language, for anything transpiled) and debug it as if it were not bundled in the first place.
Don't deploy this map file, unless you want external users to be able to see all your original source code.