Running in-browser development server [like stackblitz/codesandbox] - javascript

The Question:
How to run a live in-browser dev server?
Context
Stackblitz and CodeSandbox are two platforms that provide online IDE to develop web applications. I have a similar use case, and would need to run an in browser dev server, but there's not much that I was able to find, apart from these few observations.
Few Observations
Stackblitz, in their announcement post describe that they use, "Progressive Web App API’s to run a live dev server in-browser."
To resolve node dependencies stackblitz uses their custom npm client turbo . On the github repo page, it is described as
Express.js routes used for hydrating client-side dependencies and type definitions on StackBlitz.
There is also some module bundler involved to support live development with hot-reloading.
I suspect stackblitz runs an express.js server in the service worker, but i can't seem to understand how. I'm out of ideas here, any help would be appreciated.

I'll be honest, I have no idea but I'd like to wildly speculate.
https://nodejs.org/api/vm.html
If you're going to just be focusing on front end code, then what I would think to do is to evaluate the code in your vm with the context of whatever modules are required. React will allow you to convert the JS into html. You can update the HTML directly in the dom.
I'm not sure how much help that is, but I will leave you with this
http://www.alexrothenberg.com/2012/02/29/building-a-browser-ide.html
https://60devs.com/executing-js-code-with-nodes-vm-module.html
If you're interested in having a contributor, then I'm down to team up on your project!

Related

To what extent does Node.js replace Apache2?

I'm in the process of updating an old piece of software (running Apache2, PHP, MariaDB, HTML, CSS) to use a React frontend. I'm completely new to React and I'm between beginner and intermediate with vanilla JavaScript so I've been researching this the last few days.
My confusion is about backend with a React web app. If I want to keep the existing architecture in place aside from frontend, will I be able to painlessly have my apache2/php integrate with my React app? And I'm also confused about the role of Node.js. Some places describe it as just extra libraries, and some places describe it as an Apache2 replacement. I think the source of my confusion is that so far in learning React and Node it always requires me to run npm start. Which feels very much like running a server like apache.
I guess in a nutshell my question is - what will my project structure look like when using a React frontend? Will I have just javascript files and host that on Apache? Or will this need to be run on Node? And where does my PHP fit in, will this need re-written in JS?
EDIT : For further clarification. I'm asking about the differences between a Node.js server and Apache2 server. That's the focus of my issue. Additional points of discussion to help me understand the problem are how PHP and React fit into all this, and whether my understanding of Node as an Apache-like tool is correct. Hopefully that makes this question less broad
For the purposes of building a React app against an existing set of web services: Node.js is used only at build time. It is used to execute the build tools which generate static files which are deployed on your Apache HTTP server.
Node.js is also used to run the development server for the React application that hot reloads it as you save changes to the source code.
Node.js can be used to run an HTTP server which hosts web services written in JavaScript (which which case it either replaces Apache or sits behind Apache (which is configured to act as a reverse proxy) … but that isn't your use case.

ElectronJS - Cache HTML and JS files from remote server

I have an electron app that retrieves the app files (.html & .js) from a remote server using the function mainWindow.loadURL('http://www.example.com/index.html')
The problem arises if the users network connection to the internet is offline or disconnected.
Is there a way in electron to cache the html and js files so that if the user is offline, electron will automatically load from the cache.
I have tried to use the HTML5 Application Cache and a plugin for webpack https://github.com/NekR/offline-plugin but these do not seem to work.
I see this is an old question but I stumbled across this when doing a semi-related search and there is no answer at all right now, so I'll provide one:
Ignoring the Electron-specific nature of this question, the web-standard way to do this is using Service Workers. Here are some docs on that:
"Using Service Workers" from MDN - https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers - this is a reference source.
"Adding a Service Worker and Offline into your Web App" - https://developers.google.com/web/fundamentals/codelabs/offline/ - this is a tutorial.
"Creating Offline-First Web Apps with Service Workers" - https://auth0.com/blog/creating-offline-first-web-apps-with-service-workers/ - this is also a tutorial.
I think this would be the most direct way to solve this, even within Electron. (An advantage of Electron here is that you have a single, known browser to make this work for, but I think what you are trying to do fits perfectly within the problem-space that Service Workers are designed to address.)
That said, I think Sayam's comment/question is valid -- if this html/js is the actual content of your electron app, and assuming it doesn't change too often you could (and maybe should) distribute it with the app itself. Then you don't need to do anything special for offline support (as long as that html/js doesn't need network-based resources), and changes to that code are deployed as application updates.
Personally I think that once-per-week is about the maximum frequency of updates for which this approach is suitable. It would not bother me if an app auto-updated 2 or 3 times per month, but I think I'd uninstall an app that updates itself 2 or 3 times per week if I had that option.
There may also be some electron and/or node modules that address this problem-space, but I've never bothered to look because one of the two options above has always seemed appropriate to me.
Old question but still valid usecase (offline cache for dynamic assets).
here is article that describes one solution for that (own ExpressJS caching middleware). Author made npm library to address that.

Cordova / Phonegap lock the source app code to be not edited/hacked

Everyone knows cordova and phonegap uses a webview so the app contains html and js and css files, which means they can be edited.
What i am wondering, is there any way to lock/ make these files not editable once the app is installed on the phone? hide the code in some way ?
Could be great to know much about this, however this should be what app stores should do , hiding the code should be not done by developers i guess, but if you have any trick/idea/ clue please share it!
thank you!
You can obfuscate the html,css and javascript files...
Some useful links:
Three Ways to Encrypt PhoneGap and Cordova Mobile Applications
Obfuscating JavaScript code in Worklight applications
You have to understand that obfuscate is not encrypt.
Your code can be reversed. But not by lazy programmers.
Since none of the provided answers so far fulfills the requirement for bounty, I can give you the official statement from Cordova project itself:
Do not assume that your source code is secure
Since a Cordova application is built from HTML and JavaScript assets that get packaged in a native container, you should not consider your code to be secure. It is possible to reverse engineer a Cordova application.
Also, there is a way to encrypt the code when packaged and then decrypt it when used. Of course this isn't safe either, but provides a little more trouble for hacker. See this blog post about how to implement it on iOS. The same concept, though, is applicable on Android or any other platform. The main point about the security is that the encryption key needs always to be available within the package.
You can minify and obfuscate your code which would make it harder to edit/understand. My favorite is the GUI YUI Compressor for windows.
LINK to GUI YUI for Windows
Unchecking Verbose is often a good idea. I have mine set to UTF8 and to preserve semi-colons. It has worked really well for me.
For most cases, obfuscation of the JS files is enough and can be easily done with a tool like gulp (which I recommend) or grunt.
However, for critical apps, you can use a native (compiled) plugin that wraps your files in an encrypted format that is decrypted when the app starts (which would definitely sacrifice some performance of course)

Tutorials for a blogging application in node.js

I am learning node.js, and would like to try building a blog on the platform. Do you know of any good tutorials that show you, step-by-step, how to build a blogging app on node? I have seen one by Nettuts, but it doesn't explain a full solution, with databases an the like. So are there any good tutorials? I do not mind if it is text or video, as long as it is descriptive and helpful.
Thanks for any recommendations!
My blog is written in node.js and express.js. I uses just a simple git repo on the filesystem for the post content. It is open source at github.com/focusaurus/peterlyons.com. Feel free to look around if you find it helpful and shoot me follow-up questions. It is no-frills but does have a basic post editor with preview and allows me to add custom markup processing logic.
There is a fully automated deployment solution in there coded in Ansible and bash that I use to deploy it to both a Vagrant-based staging VM and a production digital ocean droplet.
You can try ExpressJS
As an ExpressJS intermediate, I can understand the question coz even I coudnt find an expressjs tutorial that "just" works and is minimal.
You can try this http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ tutorial or the hack sparrow express tut mentioned by Wyatt
If you are completely new to MVC web frameworks, its gonna take a lot of patience. Since I worked on Django befor, I was able to stand up n run pretty quickly with ExpressJS
So even if the tutorial doesnt make sense there's plenty of other resources likes docs, google and StackOverFlow :D
Node is all about using what is available in the ecosystem. npm is great and sets node apart from other environments. You could use, for example, Wheat.
That said, you could check out this article which is pretty old, but good.
Alternatively, I think the Hack Sparrow Express Tutorial would have a lot of valuable concepts for you, especially when coupled with his posts on Mongo.

Could someone explain how to use the UpdateManager in TideSDK 1.3.1 Beta?

I was wondering if there was anyone online who would be willing to talk me through deployment and application updates in TideSDK 1.3.1?
The background is that I would like to build a HTML5 application wrapped in a desktop client, for deployment on Windows and Mac. The resulting application needs to have a simple installer and a mechanism for receiving updates either through the internet, or using an update installer if internet isn't available.
Are these features currently supported in TideSDK 1.3.1? And if so is there any documentation regarding the update process? I've looked through the API docs and have found reference to an UpdateManager, but have been unable to find examples of usage.
Rich
TideSDK-1.3.1-beta currently contains legacy code for updates that is currently being refactored. As such, this is going through a transition presently. You will see us blog on our progress with this shortly. This piece of the SDK is critical and we understand its importance for app deployments.
We are currently working to provide better, more flexible installers that will be revealed to our users and the community as soon as we have this all together and tested. The refactoring and core improvements are modularizing the build and update code, giving us a much stronger foundation in the core to build upon. Application update and build services will use this new code. We will be making announcements on this important functionality. What we are doing will make everything easy and complete for everyone.

Categories

Resources