NextJS to ElectronJS - next.js

I have a web app in NextJS and TypeScript working fine. Now, I want to move it to ElectonJS so I can move from the web and create desktop app versions. I have tried different approaches but nothing worked for me. I also failed to find a good documentation or article about migrating NextJS to ElectronJS.
I am using nextron but I can also use some other if recommended.
Approach 1: I created a new nextron app using "yarn create nextron-app my-app basic-typescript" command as mentioned on nextron guide. Then I moved the whole code inside the renderer directory but it is showing an error when I compile. Error in Approach 1
Approach 2: I created a dummy nextron app and install all necessary dependencies there, then I copied the files, dependencies etc to my NextJS app and moved the pages folder to renderer along with the necessary files but it is also showing error.Error in Approach 2
My NextJS App
Can anyone help please?

Related

Adding template to existing React Application

I have a medium experience in developing applications with React, and up to study and experience I have always used very basic layouts, creating components and styling with a .css file
Currently I want to start using the various react templates that I find online, such as:
"Connect Plus React Free Admin Template" etc.
This is the first time I try to integrate a template into an existing application.
So I tried to copy from the template what I needed and then bring it back to my application.
Then update package.json and package-lock.json and run npm install.
Unfortunately, then starting the app with npm start it broke and did not start anymore.
Do you have any tips, advice or guides on how to do this?

Vue 3 local component library (sfc) development not working due to Plugins not reloading

I need help. I'm developing a vue-3 (Quasar/Electron) app with a separate component library. What I'm trying to get working is to develop the component library locally alongside the main app with hot reload.
It's pretty simple, I already have the component library configured as a Vue plugin. If I push to NPM and add it to my project as an npm dependency, everything works fine. What doesn’t work is when I use yarn link to symlink locally and then add it the same way:
import { MyComponentLib } from 'my-component-lib';
app.use(MyComponentLib);
This worked fine on vue-2 as any changes to the local component lib would get reloaded and immediately shown during development. However with vue-3, you can only load a plugin once (even in development). After the first load you will get a warning: "[Vue warn]: Plugin has already been applied to target app.".
You basically need to restart the app everytime to see changes to your local component library. Does anyone know how to get around this?

NextJS deployed to Vercel: 404 page not found

I have a NextJS app without an integrated api that I want to deploy to Vercel. It works fine when I run it locally yarn run dev and I can also build it yarn run build without any errors. When I deploy it Vercel, however, I receive a 404 Error.
Here is my folder structure:
app/
- components
- pages
- editor
- [id].tsx
...tsx
- public
- utils
- db
api.ts
I am using NextJs 10.0.3.
Here is a link to the deployed app.
I don't have a nextjs config file. My assumption is that the error is caused by the dynamic route but I can't find my mistake. Also, no page is working when the app is deployed as opposed to only the dynamic page.
Do you have pointers on where to look next?
EDIT 1:
Here is a link to the GitHub repo.
EDIT 2:
I found an issue but don't know how to fix it.
This is how my build output looks like on Vercel:
This is how it's supposed to look like on Vercel:
Not sure why the whole _next folder is missing.
I just had this exact same issue.
I have my Next app in a sub directory. I think that might be the cause of some problems.
What worked for me was.
Make sure to pick the right sub directory. Mine had a little Next Js icon on it.
The framework preset needs to be set to Next.js.
Go to Project Settings
Change Framework preset from Other to Next.js
Redeploy the project.
Edited
Try to deploy using
now --prod --force
The --force flag will clear your build cache (in production) and force production push.
If still no working then make sure to add now.json
Also make sure to choose Next.js as Framework preset (and not other). You can find that in Project settings and under Build & Development Settings.
More here: https://vercel.com/docs/concepts/deployments/build-step
My issue was that I first attempted to deploy Vercel through a team. When I created a new Vercel project under my individual Vercel account and deployed the same code, it worked! I hope this saves someone else time because I just lost 3 hours trying to find this. I'm using Next.js as well.
If you are trying to deploy through a team, you might need to configure the team ID in your vercel.json first e.g.
{
"currentTeam": "team_ofwUZockJlL53hINUGCc1ONW"
}
ref: https://vercel.com/docs/configuration#global/config-json/current-team

Specific Angular 2/4 & Meteor quickstart/tutorial?

I've been all over the Meteor and Angular-Meteor websites (and Angular-Meteor github) looking for a pure Angular 2/4 guide to using Meteor (all I can seem to find is an Ionic one). Kind of confused as to how to use the CLI's together. Does anyone have a tutorial or know the steps to setting this up without Ionic? Or should I just be trying to follow the Ionic tutorial but using Angular CLI instead?
For anyone who is interested.
I spent most the day trying to use https://github.com/Urigo/angular-meteor with my app (used the quickstart), copied most of my apps src into the clients/imports directory and tried to keep the same app structure as the one on github, with a bit of messing around was able to get the angular bit working however if you are planning on using #angular/material, especially with a custom theme then you're in for a world of hurt (quite a few issues and comments re importing scss mixins from node_modules on the meteor github, meteors build system doesn't seem to like it).
To make it all work properly, follow the steps in The process I've done to recreate this section at https://github.com/Urigo/angular-meteor/examples/angularcli-meteor
If you already have an angular 4 app partially built then start in your apps root directory at step 3 (ng eject).
Instructions are fairly straight forward. Any steps where there isn't code examples (Now we need to create api/tsconfig.json) copy the file in question from the repo.
Hope that saves some others a heap of time.

Application development on meteor

I am working on a project in my office, for this i have downloaded meteor project code from github for customization, i don't know how it's run before? i have successfully developed demo app from meteor tutorial, but when i am trying that unzipped github code and using same command in terminal as for demo app, its giving me an error "project not in meteor directory". But when i am using intellij idea for importing that, so .meteor directory is automatically getting created there.
What should i do for this. Please help i am in trouble.
It's because your command line is not projected in your meteor project directory.
Probably this would solve your problem
Step 1. Create a meteor app with "meteor create appName"
Step 2. Delete all the files from the app you created in previous step.
Step 3. Unzip and save all the files in appName directory which is created while doing the first step.
Let me know if there is error again.
Meteor Upadated tutorials with react js are explained our blog Meteor Js For React Developers

Resources