I have a question about my Next.js project.
I have configured my project to be build over the standalone mode for the deployment
experimental: {
outputStandalone: true
}
Using this, it generates me a standalone folder with a server.js like expected.
The main issue is that I am using an env variable in my sources, called NEXT_PUBLIC_API_BASE_URL
When I start my project in development mode (using next serve), it works fine.
But when I start the standalone generated file (using node server.js) it does not work.
It seems that the file is loaded on the "server side", when I console.log its value in the .next/standalone/server/pages/_app.js it shows the right value in the node console.
But it looks like next is using files under .next/static/chunks/pages/ and an other app.js that does not seem to access process.env (on browser side).
I thought that prefixing my env var with NEXT_PUBLIC was meant to work this way, it seems not.
Any idea on how it works there ?
On your build server, create the file name ".env" and put all of your environments.
NEXT_PUBLIC_API_BASE_URL=https://api.example.com
please refer Docs
Related
I develop a nextjs application. Inside the root folder, I've made landing/pages/ folder and I want to run dev server with those pages using next dev ./landing. The point is to create a separate app using the same codebase, configs, etc.
Dev server runs properly, but most features don't work:
.env is not read from the root folder (the workaround is to use cp .env ./landing && next dev ./landing). but it's an ugly way to solve it
assets are read from public folder inside the /landing. But I'd like to use the public folder from the root.
I can't use components from folders that are "above" /landing folder in the project structure. The compiler throws an error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
Is there any custom configuration to solve the problem? Maybe there is another way to have something like two "pages" folders in which there is the same source code, but thanks to it I could build two separate apps?
I've pushed my current code to the following repository:
https://github.com/michalgrzasko/nextjs-2-pages-example
Just run dev server using yarn dev. To reproduce errors:
Uncomment process.env.NEXT_PUBLIC_APP_BASE_URL in landing/pages/index.tsx
Uncomment <Nav /> component in the same file
.env is not runnable files, if you will load from "somewhere" - you don't need it.
You should focus on the next.config.js file.
Check this, maybe will help.
Anyway, you will need:
-API from your second source(from where you like to load config)
-Load config every time once you dev build your project.
-use process.env.your_name in your classes/functions
Using create-react-app I have an application that runs within a .war which is deployed on tomcat. My question is as follows,
http://ip_addr:port/my_application_context/
I need to be able to set the ip_addr:port/my_application_context, variable to whatever I want, at runtime, in production because all of our customers use different paths.
Right now I can use a .env.production properties file to change it and it works fine the but is I need to change it then build the app. Which isn't going to work in a production environment.
Is there any way to do this using an external properties file?
You can consider to have a Configuration API which is invoked before mount of app component and get the details of environment settings you want.
In general env variable file are meant to be changed before any build. If your settings are changing frequently then it should be part of Configuration API response.
I have a electron app, and I use it together with the create-electron-app.
My electron main process file resides in the public folder, and so does my sqlite3 database.
When I reference the database in development it works as expected because I can access the path:
F:\www\project-name\public\api\db\demodb01
But in production the path does not exist (hidden behind app.asar I'd say):
C:\Users\userName\AppData\Local\Programs\project-name\resources\app.asar\build\api\db\demodb01
How can I target the database file in production?
When storing files in your application you should use app.getPath('userData') to store them outside of your applications scope, which keeps them persisted.
nedb is a common choice for Electron applications since it's a lightweight database written in JavaScript. If you haven't checked it out, I recommend you to do.
You have one another solution. Please follow the below steps:
First Install electron-is-dev
Add these codes inside your main.js file:
main.js
Now in package.json make the following marked changes:
package.json
Thank you.
im trying to set up an electron app with typescript.
So in my app.ts i have to following statement to tell electron which file should be opened:
win.loadURL(`file://../views/index.html`);
When i had only javascript it worked fine.
But now after compiling electron just opens an empty window.
Because im compiling my typescript to a different directory.
Is there a variable for the root dir or something dynamic path resolution i could use?
Thanks
This is probably caused because your file location is not absolute, this may be fine when debugging your app because your running it from a specific place but once you compile it will not be able to find the file try using something like this:
win.loadURL(__dirname + "../views/index.html");
__dirname is a variable provided by NodeJS which is the absolute location to the directory of the current file.
I would like to use ES6 Modules with Angular2 in an app that is served by Node.js and Express.js. However, when I try to load an Angular2/ES6 app in the browser, the following is printed in the FireFox console:
The stylesheet http://localhost:8080/boot.css was not loaded because its MIME type, "text/html", is not "text/css". localhost:8080
SyntaxError: import declarations may only appear at top level of a module vendor.js:1:0
SyntaxError: import declarations may only appear at top level of a module boot.js:1:0
The problem seems to be the result of something missing from the build of the Angular2 app that is done by the Node.js/Express.js server that serves the Angular2 app.
Specifically, the problem emerged after I deleted the entire public app folder from this GitHub AngularJS 1.x sample app and replaced it with a copy of the entire client app folder from this GitHub Angular2 example app. When I then started the Express.js server with nodemon server.js and typed http : // localhost : 8080 into FireFox, the console printed out the errors shown above.
I would like to get the Angular2 app running in the browser so that I can then manually start stepping through the work of re-creating the Node.js routes and resolving other errors one by one in order to get the Angular2 app to work with the Node.js/Express.js server.
What specific changes need to be made so that these initial errors due to ES6 imports are resolved when this Angular2 app is placed inside the public folder of this Node.js/Express.js instance?
I just check out those two repos, and then do the same thing you mentioned above.
the problem is that the client folder of angular2 is written is ES6 syntax.
I don't think currently we can run this code on the browser without problem and
you can tell from the repo that it uses babel to compile the code
so if you want to use its client code, just make sure you also do the same
compile stuff as it does. I think everything should work
update
What I am trying to say is the angular repo use babel and gulp to help it
transpile the code from ES6 to ES5.
You can run gulp serve under angular2-esnext-starter and it will generate one
new folder called dist my screenshot
copy the client folder under that dist folder to node-todo and remember
rename it to public and you will see everything is ok.
so the hint is copy the gulpfile of angular2-esnext-starter and don't forget
to add more dependencies to your package.json should solve your problem.
my workable node-todo