I have a svelte application, I have separated the backend from the frontend by making two different directories the backend is the express application and the frontend is the svelte app. I fetch the data from the express server when it is needed. I need an admin dashboard where I can control things but the problem I am getting is that I don't want to display the static HTML and the svelte files that are supposed to be on the admin page.
Now if I go to the browsers dev tools I can see the components that are displayed on the admin page and the code inside those components. Of course, the user can't access the sensitive data that is stored on the express server, but still, I would like to keep the admin page completely hidden.
I can fix this by making a get route on the server side and running a middleware in between that checks that the user is admin and then just renders the HTML, but the admin page needs to have a lot of functionality so I need to use svelte.
Image from the browsers dev tools
I found an answer! I was using the <a> html tag to navigate to the admin page and the data was preloaded for some reason. In my launched app I don't need to navigate to the admin page using the <a> tag.
Related
I have developed and hosted few react applications but I'm still confused about the word server side rendering. So, I'm curious to know what is the benefit of serving my react applications from an express server.
Thank you as I look forward to your response.
Please consider clarifying your question, because I don't know also if you use next.js or nuxt.js.
Angular, React, Vue.js are JavaScript frontend frameworks/libraries, which means they are using JavaScript language.
The websites on the Internet contain HTML, CSS, JavaScript Vanilla code.
The application you developed using React.js needs to use React.js library source code, and then you need the React.js code to be compiled to JavaScript Vanilla code because the browser at the end needs a JavaScript native code that it can read.
When I need to see your hosted website, I need to write the domain name to see it, so the HTTP request at the end goes to the server which is hosting your react app, thus if your react application contains just a static content, for example, a landing HTML page, then there is no need for server-side rendering from Express(Node.js), Ruby, PHP, Java,...
What I mean by static content is content that doesn’t change in response to different users, all of them will get the same content.
Notice you can host a static website in Github and you still don't need any server-side rendering...
Let's have a small application for a better explanation:
If you developed a Portfolio that contains a description of yourself, images of your projects, skills, then here there is no need for a server-side rendering.
But if you developed a system that lets a user who has permission to create a short link from a full URL, then you need a backend server(like Java, Ruby, C#, PHP,...) to host the logic code in order to generate a tiny URL from the full URL, and then save it in a Database, that way any user can click the generated tiny URL then this request goes to your backend server which needs to redirect the user with correct full URL, an application like this cannot be done using React.js alone, you need a server to handle the logic.
Returning to your answering your question: "So, I'm curious to know what is the benefit of serving my react applications from an express server."
If you have static content you can avoid using Express, but if you think your application needs some backend logic in the future, then Express or any other backend framework will help you in that.
*Notice when you have a static website, and you tried to edit the content of it, the users which already visited your website, their browser might cached your website content unless (they disabled this option in their browser), so if your website is cached in users' browsers they might not get the updated content unless you changed the static website file name for example by adding ?092130123 to file name in order to let the users' browser download the updated data
I want to be able to do server side rendering and image screenshot capture to pdf for a spa angularjs site. The site is secured so many of the API calls will be protected.
What are some approaches for capturing the entire site and doing this. One approach is to have the code on the server and try to render but the issue here is that the site would be secured so the api calls might fail.
Is it possible to push the dom from front-end to the server side of all of the rendered content? I have seem simple examples with public type sites and using puppeeter, but not a protected spa that works?
I currently have a web app made in node.js. One feature of this app is to take notes. I want to provide the user with a way to browse the internet and select a text to add as a note in our web app without having to manually copy-pasting from one browser window to our app.
I know I can do this relatively simply using a Chrome extension that would be linked to the user account and would save the note to the database. However, I cannot use this approach since not all my users can install Google Chrome.
Therefore, I am looking for a way to browse the web from inside our web app. For example, it could be in an iFrame where we display a complete browser. That way, the user could navigate the web for information from inside the app, select text to save and click on a button (probably located outside the iFrame browser) to save the selected text as a note in our database.
How can I achieve such a thing in node.js ?
This is, essentially, impossible.
For you to get any data about the site the user was browsing you could either:
Restrict them to browsing sites willing to partner with you to give you permission to access their data via postMessage (a technical change on their part to work around the Same Origin Policy)
Proxy every request through your server which would:
Have large bandwidth requirements
Require a lot of rewriting of URLs (including dynamically generated ones in JS)
Require rewriting of X-Frames-Options and Access-Control-Allow-Origin headers
Need users who would trust you with all the data you passed through your system (including their passwords to third party sites)
Not work for Intranet sites (since your server could not reach them)
im having trouble to understand how the combination of angular and node js can create a SPA website.
my question will be better understanable with an example:
lets say im trying to build a spa website:
client side - angular 4:
i have several components in my app, and configured routes to all these components.
i used ng build from the angular cli, and it created the dist folder with index.html.
on the server side - node js:
i used a static route for the index.html file.
when accessing the server via browser i get the index.html,
all the angular routes are working and can navigate between components successfully.
but i cant understand really what is happening behind the scenes every time i navigate to a diffrent component,
do i get that component from the server?
(then it wont be SPA..)
when i access the static path the first time, does all the components get downloaded to the users browser, and from then on , the navigation only happens on the client?
what that index html contains ? what does the ng build command does ?
No. The router removes the view of the current route component from the DOM, and replaces it by the view of the newly routed component. It also pushes a new entry in the navigation history of the browser to do "as if" you really downloaded a new page from the URL of the new route.
Yes.
The content of the index.html is exactly what you see when viewing the source of the page in the browser. Or when viewing the content of the index.html file in the dist directory. It's simply an HTML page, with the root component, and a few JS scripts. These JS scripts are bundles, created by ng build, which contain the result of the TypeScript compilation of all your files, JS modules of Angular that your app uses and, deending on how you build the app (i.e. without or with --aot), the templates of the components or the result of the compilation of these templates (+ the CSS files of the component). In short, the whole app is bundled in those JS scripts.
I have an angularJS single page application. It is an admin dashboard. However I do not want anyone to access the dashboard unless he is logged in.
This is extremely broad. But you can look into route guards and canActivate from angular. Very similar between angularjs and 2/4. https://angular.io/api/router/CanActivate