Production Build for react + electron + next js

[AnandK1100]

I'm trying to make production build, but when i run command "nextron build --all" it delete "app" folder and create new one. How to change this behavior and how to make builds when my project structure is:

• app
• node modules
• pages
• main.js
• next.config.js
• package.json

[lacymorrow]

@AnandK1100 By default the working directory for Nextron is the app folder, so you're experiencing a naming conflict. When Nextron runs, it clears that folder and copies over the new build.

Without seeing your code, I would recommend that you rename your app directory and fix any imports, that will solve your naming conflict.

If you post your code or repo, I may be able to help more.

[AnandK1100]

I don't have renderer folder and my next.config.js file is in the root. Nextron finds next.config.js file and pages folder inside renderer folder. how to solve this ?

[AnandK1100]

I changed my app directory to resolve naming conflict. But I'm getting error 'You may need an appropriate loader to handle this file type' when I import a component to one of pages.

I have tried your 'custom-build-options' repo and still getting the same error.

Code for Pages/home.js file: import React from 'react'; import Head from 'next/head'; import Link from 'next/link'; import Firstscreen from '../../screens/firstScreen';

class Home extends React.Component { render() { return (

); } }; export default Home; Code for first screen component: import React from 'react'; import Head from 'next/head'; import Link from 'next/link'; class Firstscreen extends React.PureComponent { render() { return (

⚡ Electron + Next.js ⚡ - Go to next page

); } }; export default Firstscreen;

[lacymorrow]

@AnandK1100 can you post your next.config.js?

Are you trying to move an existing Next.js site into Nextron?

[AnandK1100]

Here is my next.config.js file code: module.exports = { webpack: (config) => Object.assign(config, { target: 'electron-renderer', }), };

I found that if I put my firstScreen component outside renderer folder then it gives error : "You may need an appropriate loader to handle this file type". If I put it inside the renderer folder then it's working fine.

Are you trying to move an existing Next.js site into Nextron? I'm just trying to make a production build, for which I used Nextron and to make a build with Nextron it needs it's code/folder structure.

Is there any other way to make production builds for electron+next+react. Also if I run my project normally by starting next js server then the electron server, everything works fine, but if I run it using Nextron then some of the routes are not working properly and reloading also not working properly

[lacymorrow]

I'm starting to see, you have a next+electron app that you want to package into an executable for Windows, Mac?

I'm not aware of any other projects aimed at building executables from Next.js apps, and Nextron does require a specific folder structure. You could look at electron-builder to potentially produced a binary from your current project state.

As for the server, you'll need to remove the functionality entirely to work with Nextron as it does not get packaged and run alongside the client. Electron loads a client window which Nextron provides. You need to build all of your logic into the renderer or use an external server to provide an API for your app. See https://github.com/saltyshiomix/nextron/issues/57

On a personal note, when creating cross-platform applications using new tech, it helps to work backwards with a new framework

• Generate a working cross-platform executable (maybe hello, world!)
• Brand everything and setup testing and CI infrastructure
• Once you have confirmed that you can create the final product you are trying to build, then write the first line of code.

I've wasted months of time building in a specific framework only to realize that it wouldn't work for my purposes, it helps to plan ahead.