Adding React.js to an existing Electron App - node.js

I am developing a desktop application using Electron.js. Now, I decided that to implement the required functionality, it would be good to use React.js. I searched for some tutorials on how to add React to an existing electron app, but all I got was tutorials on building React apps with Electron from "scratch". Also, all those tutorials add electron on top of an existing React app and not the other way round. I haven't found any existing stackoverflow answers addressing this problem.
I don't want to go through the mess of creating a new project and then copying the existing code to the new project. This would also mean I would loose all the older commits from my Git and I want to continue with this project on the same repo.
Could anyone help me figure this out?

Related

Is is possible to make Desktop App with Nodejs along with Online connectivity

I am trying build an application that can run offline and online too. If the application is offline it must run with minimum functionality and if it get an internet it automatically push data online Any references or tutorials would be appreciated.
any references that can help me to achieve this.
Yes, surely that's possible and you already mentioned the tools: node.js and electron are suitable. Most electron apps do that (whatsapp and joplin directly come to my mind).
You can look in the source of those already available apps, but it might be difficult. I would start with the tutorial of electron and search for the features as "check internet connectivity" (i.e. here on stackoverflow)
Your question is a bit to broadly stated to help in detail.
Yes, surely that's possible. you can use the node.js and electronJs with Angular are suitable.
For Angular and NodeJs refer the below document:
Build a Basic CRUD App with Angular and Node
For ElectronJs refer the below demo project:
Electron Samples
Best luck !!

How to create a nuxt.js app without create-nuxt-app

Please I wish to know how I can create a nuxt app without the create-nuxt-app template. I am pretty new to it and I don't want to download the template but start a new project (say with Vue.js) and incrementaly add nuxt functionality to my app. I Googled but can't find a relevant post.
You cannot add it incremetaly since it's a framework build upon Vue

asp.net core webapi with authentication (back-end) and react redux app(front-end) with authentication working independently

i need asp.netcore web api with authentication (ApplicationDbContext i.e.identity default database context ). i feel comfortable with visual studio as back-end.
2.i need react-redux app with authentication(front-end) working independently that start with "npm start". i feel good with vs code. on the front-end i want to add react-redux and redux-thunk to implement my course website front end. i have been in struggle for a week to achieve this.i tried with vs templates but when ever i install react-redux the user management fails and the client app does not start.tried, web application,api and web application with restful templates.
if someone have better idea to accomplish my task . my overall problem is to create a website that can present online courses.the teachers could add course material and student can access.
Try running npm install before your create-react-app script.
If that doesn't work, deleting "node_modules" folder and running npm install.
If that doesn't work, you can always try setting up your react environment manually (For example, as in this great tutorial here)
Worst-case, you can always use react just client-side only, and although this becomes difficult due to most online tutorials being server-side, at least you can get started and not be blocked on your project.
Source: I googled ;)

Convert Angular 2/3/4/5/6 project to Angular Universal

I have just updated my project to work with Angular 5, and I have got a NodeJS setup on my hosting so I want to create an Angular Universal Application, I would like to convert my current Angular 5 project into a working Angular Universal project that I can setup on my hosting.
The only thing I found on this so far is this;
Convert Angular 4 web app to Angular Universal app
I followed this and It gave me errors, I imagine due to the quick changing nature of Angular that the answer is most likely outdated, so I was wondering the best way to convert it.
Should I just use the starter seed and do the tedious work of adding all my code?
The best way to do this for me personally was add in all my components, services, modules into the universal-starter project, ensure I remove hammerjs or import it properly (for Material 2). I converted most of my components to have .module so I could use their lazy loading (not forgetting to add these paths properly in my routing file and in the static lazy loading path)
It only took a few hours and alot of that was just bug testing/fixing so it was pretty easy all in all.
I had the same issue several weeks ago. There is a Wiki on how to implement Universal into an Angular CLI project : https://github.com/angular/angular-cli/wiki/stories-universal-rendering
Maybe that helps you out.
I found it the easiest to take the current Angular Universal Starter Kit and import all my Modules into a fresh installation. As the new starter is for Angular 5 CLI I hope it's future proof. We will seeā€¦
I wrote a starter kit for MEAN applications with Angular Universal for Angular 5 and you can clone my repository at GitHub here: https://github.com/Stanza987/mean-starter-kit. It provides all the instructions you need to get started. For your specific app, you can just delete the MongoDB part (Mongoose and the out of server.js, node_src/config/database) and npm uninstall mongoose and be able to integrate your project in.

Importing an Angular2 application into Phoenix-framework

I am currently working on two related projects. One is a Phoenix based website and API, while the other is an Angular2 application that among other things uses the API provided by Phoenix. I now want the Angular2 application to be used by the Phoenix project. The problem is that I don't know what the best approach is. I am very new to Angular2 and NPM, and know very little of how it actually works outside of basic usage. These are the ways I can think of solving my problem:
Put the Angular2 project into the Phoenix project, making it one project. I have no idea how to do this, but I will probably get there through trial and error as both use Node.js so it should be doable.
Publish the Angular2 project to NPM, and then import it to the Phoenix project. How much work would be needed on the Phoenix side? Would it be the same as just running the index.html in the Angular2 project? Would I need some kind of Angular2 "shell" around it?
Run the Angular2 application as it's own thing, and just link to it through the Phoenix website.
Importing it as a node module sounds like the best approach, but can it be done for full applications, or is it intended for support libraries only?
I am unsure if this is the "right" way to do it but this is what I did in the end:
I compiled my entire Angular2 project into app.js, vendor.js, and common.js, I then moved it all to web/assets/. After that I simply created a new html and referenced the files in question.
The biggest challenged was finding something to compile it all into these 3 files. I ended up using a stripped down version of: https://github.com/AngularClass/angular2-webpack-starter
I think you would want to leverage brunch.io, which ships with phoenix to handle your front end dependencies. There are skeletons which are essentially templates that create different front end configs but I don't see one that provides angular2. In this case I would say use bower to install the js packages you want ie:
bower install -S angular2
With this you can use brunch as a processing pipeline and it will handle minification, linting etc. and you will still be working within the "recommended" approach to managing front end assets in Phoenix.

Resources