I am trying to add a guardian process for my NextJS application. it will start with the launch of my nextjs application, and then perform some jobs regularly(like backup data).
But I didn't find some "callback" or "eventListener" to let me call my startup function.
I tried to execute the startup function in pages/_app.tsx, but it was called every time when user accessed it, not only once when the nextjs application started.
The following is my expectation:
Call only once when the entire nextjs application is started.
No need to use a custom backend.(There are already a lot of code accumulated on the default server of Next)
Can use the ability provided by Next, such as TypeScript, Babel, export / import, etc.
The code in the nextjs application can directly Import related its function and use.
Can anyone provide some inspiration?
Related
I have a deployed application in Progress 4GL PASOE that is working in Production, but now we had to add a new method to the Business Entity class. We did it locally with Developer Studio and, after restarting the instance, it works as expected. However, I don´t know how to apply this changes to Production. I have already copied the .r/.cls files to the corresponding openedge folder and also the service json file with the catalog to the webapp folder. I have restarted the pasoe instance (tcman stop/tcman start) and restarted service, but if I make a request through Postman it raises a 500 error:
What else should we have to do? Is it necessary to delete the instance and do the whole deploy again to just add a new method?
The log file is throwing the following exception:
2021-06-16T16:44:30.500+02:00 WARN [thd-1] nynweb:r:0000000b o.a.cxf.phase.PhaseInterceptorChain - Interceptor for usuari has thrown exception, unwinding now
java.lang.NullPointerException: null
"usuari" is a table which is in the catalogue indeed.
Please let me know if you need some clarifying data to fully understand my problem.
Many thanks in advance.
Regards.
Normally, to add new methods to existing classes, I update the classes in the application directory and export the services again by OpenEdge, creating a ROOT.zip. I always use the incremental deploy so I delete the agents and then, when calling the created method, it will respond.
A tip to check if the method is published is important to access http://server:port/rest/; there you will see the catalogs that are published and also if your new method is available.
We're developing a Next.js app using react-i18next for localization. We're using next export (Static HTML Export). The react-i18next library requires initialization code, and I'm not sure where to call that.
(We're not using next-i18next, as that does not work with next export.)
Right now I have the initialization in a separate module (outside of pages/). If I import that module into pages/_app.tsx and run the build script (next build && next export), the build hangs. When I hit Ctrl-C, I get:
Error: setRawMode EIO
The same thing happens if I try to import it from a custom Document.
My current workaround is to import the initialization module in pages/index.tsx - that works, but feels wrong.
The project uses TypeScript and yarn v1, and was scaffolded with create-next-app (in case any of that is relevant).
A Custom App import does appear to be the correct place for client-side initialization code (inferred based on Custom Polyfills).
The issue is that an _app module will execute when next build && next export is called. Asynchronous calls (i18next-http-backend in my case) can cause the build script to hang.
The fix is to wrap the initialization code in:
if (typeof window !== 'undefined') {
// initialization code - will only run on client side
}
Based on https://flaviocopes.com/nextjs-server-client-code/
This does mean that the initialization code won't run for Jest tests either, but react-i18next can be mocked.
I have an angular 9 application deployed in firebase. I am planning to implement Angular Universal SSR for SEO.
Could anyone please clarify my doubts regarding Angular 9 Universal + Firebase hosting.
(I am currently using Spark plan which does not includes cloud functions.)
Can I implement SSR without Firebase cloud functions ?
Also,
My website doesn't have API calls(other than Google Analythics on index.html), no database connectivity and no query string parameters. That means, my home page contents are always same**. In this case, can I use static server side rendering without cloud functions.
If this is possible, How to deploy the output to firebase ?
3.1, Will copy the dist folder contents to server works?
3.2 How to run SSR and non SSR version in my local?
Note: **My website is not static html page, I am providing some client side fuctionality using javascript/typescript code which does not have server calls.
Other than implementing Angular Universal, Is there any way to to achivbe SEO with Angular Apps?
This can be done via Angular pre rendering.
Prerendering does not requires cloud function or node support in server.
It is easy and Angular CLI version > 11 directly supports it.
Now Web crawlers can able to read the entire HTML content. Because the output of prerender is a rendered HTML file.
Steps
Install Angular Express Engine using the below command
ng add #nguniversal/express-engine --clientProject project-example
Run the below command
npm run prerender
Goto dist folder
Copy/deploy contents from the folder 'Browser' to server environment
Note that any code related to window, document, navigator will throw error and should be wrapped inside if condition like this.
if(isPlatformBrowser(this.platformId)){
// your code accessing window, document, navigator.
}
Let's say I have a file named utils.js, containing two functions s and c.
s is a server-side function (Being called on an /api endpoint handler), and uses mongodb package.
c is a client-side function (will be bundled and sent to the browser).
When compiling the app using next build, will it cause any issues?
Does webpack know to bundle only part of a file/module? (considering server-side functions and imports as a "dead code" since they only being called from a server-side code)
Thanks
If you need to know which functions get bundled to the client & which ones to the server, there's an easy way to know this → https://next-code-elimination.now.sh/
Just copy & paste the contents of your file into it & you'll see which code gets bundled to the client & which code is bundled to the server. If you have imports then make sure to put all the imports in one file so you can see how it works.
The thumb rule is:
Anything like getServerSideProps, getStaticProps & getStaticPaths will be removed from the bundled code. If you import anything from a file that uses server-side code like fs but doesn't use it in any of the above 3 functions, then it won't be removed (check at Next Code Elimination Tool) & will give you an error.
The tool is the answer. I copy-pasted my file in it & found the answer in an instant.
I think there will be errors but not in the build time. It is likely issues will happen in the run time. You won't be able to access file systems on the client side just like how you can't access the window object on the server-side.
In my current project, we have utility functions for both the server-side, client-side, or universal. All server-side functions are called in getServerSideProps to make sure they work as expected. All your server-side code in getServerSideProps will not be imported as part of the client-side bundle if that's what you mean by "dead code". According to the Next.js
Note: You can import modules in top-level scope for use in
getServerSideProps. Imports used in getServerSideProps will not be
bundled for the client-side.
This means you can write server-side code directly in
getServerSideProps. This includes reading from the filesystem or a
database.
I'm not aware of a way you can ask webpack to bundle part of the file or execute a subset of import statements.
I hope that provides some help.
Reference:
Docs - getServerSideProps
Custom Webpack Config
So im trying to build ontop of the angular-meteor WhatsApp clone tutorial using Ionic 2 CLI
This tutorial basically deletes the client folder in the meteor project and uses the meteor-client-side package inside an ionic project to connect to the meteor server.
Which works perfectly fine, but now i'd like to subscribe to a meteor publication with an reactive parameter.
After searching the Meteor API Documentation I found the Session object:
Session provides a global object on the client that you can use to
store an arbitrary set of key-value pairs. Use it to store things like
the currently selected item in a list.
What’s special about Session is that it’s reactive. If you
call Session.get("currentList") from inside a template, the template
will automatically be rerendered whenever
Session.set("currentList", x) is called.
In the Meteor Subscribe Documentation you can find the following example:
Tracker.autorun(function () {
Meteor.subscribe("chat", {room: Session.get("current-room")});
Meteor.subscribe("privateMessages");
});
This subscribes you to the chat messages in the current room and to
your private messages. When you change rooms by
calling Session.set("current-room", "new-room"), Meteor will subscribe
to the new room’s chat messages, unsubscribe from the original room’s
chat messages, and continue to stay subscribed to your private
messages.
Which is exactly what I want to do too. But as the Session documentation states, session is a package I have to add to the meteor project:
To add Session to your application, run this command in your terminal:
meteor add session
Now my question, is there any way to add session to the meteor-client-side packages?
If I just try to call Session.set() it fails on runtime with Session is not defined
My guess is that I would need some npm package that extracts the Session functionality (basically a sessions-client-side npm package) like accounts-base-client-side
Is there an other way to do this?
How would I build my own sessions-client-side?
I tried to run meteor add session in my meteor project but was not able to find the code for Session anywhere in .meteor folder and npm_modules.
I also looked into the meteor GitHub but the Session.js file they have contains only documentation
Any input how to do something like this would be nice
Update:
I've looked into the accounts-base-client-side package and found out that they are autogenerated using a script, so im currently trying to adapt this script to work with Session instead of accounts-base.
You can find my attempt at: https://github.com/AwsmOli/session-client-side
Still work in progress, but i should get it to work soon
Update 2:
See my answer, my session-client-side is working now :)
The "Session" variable should just appear and be accessible. If you need to verify that, start a new project add the package and write some code to access it. It is likely that something has (unwittingly) nuked the Session variable - I have seen this before with another package.
Another way of doing this is with "getReactively". Below is a helper that uses it in a query. Make sure you declare it before the helper (otherwise it won't work). This one uses the result of another helper, but it can be any variable, and you just assign the variable for the reactivity to kick in and run the helper.
this.helpers({
currentUser: () => { return Meteor.user() },
elder: () => {
let e = Elders.findOne({_id: this.getReactively('this.currentUser._id')});
if (e) {
utils.services.setupElder(e);
}
return e;
}
});
As per the meteor docs, you have to import it:
import { Session } from 'meteor/session'
This will enable it on the client.
In earlier meteor versions this was not required, as it was both a default package, and automatically imported into the global namespace.
I ended up creating the session-client-side package myself, and its working nicely.
If you need it too, its available on GitHub:
https://github.com/AwsmOli/session-client-side
and NPM:
npm install session-client-side
credits to idanwe who created the client side packages and made it realy easy to adapt his work to work with any meteor package :)
To use it with Ionic 2 Apps:
import it in your entry points (src/app/main.prod.ts & src/app/main.dev.ts)
import 'session-client-side';
and now the global Session variable is accessable form anywhere in your app:
Session.set("aCoolNameFormyAwsmChangingObject", myAwsmChangingObject);
Thanks for the help!