Application Structure for svg-edit using ExpressJS - javascript

I want to create an application i.e svg-edit that use javascript for client side operations but I want to integrate it with ExpressJS.
Task needed:
1. User Authentication page
2. After authentication depending on the user name the user is directed to the svg-edit page but the background image and the svg is the value from the database.
3. Auto saving and saving on close.
For this I have using ExpressJS and svg-edit 2.6.
My Approach:
1. I will create a page auth.html in /views of Expresss
2. Post the page and in the route handler authenticate it and then redirect to the svg-edit.html the whole folder with all its related .js files are put into /views so it will redirect it.
The porblem is that when server redirects i want to send the image location, username to the svg-edit.html page so that it changes the background w.r.t the value gained.
What is the best way to do such an operation.
Since I am new at ExpressJs so before writing the code. I need suggestion for the structure.

Related

Dynamically building static websites

I'm building a simple website generator using React, Express/Node and MongoDB.
I built a UI to receive contents and styling params from a multi-step form, and a dashboard where users can manage settings in second place. All the data is saved/fetched in Mongo when needed, using Express. I have a "publish" button in the frontend, which fires a POST to the backend.
Then the related express route fetches the correct data from mongo and pass it to a function, which runs locally a "create-react-app" with a custom template and injects params/content to the right components. After that, it runs a build and deploys the result to a subdomain.
My question is: am I wrong managing to build static files and deploying them every single time the user hits the "publish" button?
Do I need to dynamically generate and serve the site when is requested?
The best and most "react" way to do this would indeed be to dynamically generate and serve the site. It will be a bit more upfront work but will result in better ux.
What you are doing now will be quite slow and not very user friendly.

Pass parameters while routing dynamically in React Router?

Required Scenario
I have 4 pages Registration form, If we close the window without completing the Registration, then we have to auto drive the page while loading.We are saving the data in local storage but we want send the data object to the Dynamic Routing Page in the application. can we have chance to add the parameters while Routing.
If I am in the wrong direction please suggest me the proper way.

Routing in a Single Page Application with a different home page

I have a single page application - which means everything on the server gets redirected to a single index.html file which does the heavy lifting and routing using the HTML5 history api (pushstate).
Now, I want to add a new landing page to the side - let's call it landing.html and I want clients to first get to landing.html when they access / and index.html if they access any other route.
Now IE9 does not support the HTML5 history API, so using "hash urls" paths like /books/authors become /#!/books/authors in it. Since the hash section of the URL is not sent to the server as far as the server is concerned all paths are / which means I can't route to landing.html or index.html based on that logic.
I've thought of a hack - redirecting URLs with / to landing.html, detecting #! on the client, adding a cookie on the server (or client) called notReallyHomePage and redirecting to the correct page based on the cookie on the server. This is really hacky and not a good solution.
What would be the correct way to deal with routing in this case?
My backend is in ASP.NET MVC but I don't think that's relevant to the question
Hmmmmm... What's the content of landing.html? From its name I'm guessing it's a pretty simple page.
Couldn't you have its contents be a part of index.html and hide/show it according to the "first time user" logic?
Or if landing.html is some weird page created by your marketing or something, then place it in an iframe which hides/shows according to the same logic.
(obviously when you show landing.html then you hide index.html)

MVC - Openning a web page with POST parameters

I currently have an angular app which contains 2 pages.
When the user finishes with page1, I create a variable with some data he entered on that page and put it in the main controller (a controller above the 2 pages). Then the state changes (he get redirected to page2) and page2 reads the data from the main controller.
Now I want to split the 2 pages into 2 diffirent web sites with diffirent addresses. How can I open page2 from page1 with parameters (GET is not an option, the data is more then what is allowed for url).
NOTE : Both pages are written in angular and page2 is currently not in MVC - its just simple HTML, css and js files. But if someone has a solution involving minimal MVC - its great.
You can do it trough a hidden form. It will submit your data as POST whatever the target url is
There are multiple ways you can do that
Completely client side solution
Using cookies / local storage - i have been using angular storage library to perform exactly what you are trying to do. This solution will not work if you are putting the pages on 2 different domains. As the cookies and localstorage can only be read by the domain they are created by.
Solutions requiring to save the state on server side and then accessing them on the second page.
Its easy to use sessions / temporary sessions to storage data server side.
Using a third party state storage is also possible ex. Firebase.
Solutions not requiring you to save the state at all but require you to handle POST data on the server side
Make a hidden form on page1. With action attribute pointing to the url of the page2. Keep the data inside form using ng-model etc. when you are ready to make the transition POST / Submit the form. Handle the POST data on the second website / url and inject it into the second page

Open a view in an html file with url parameters

I am trying to create an MVC web app, without any MVC framework. What I've done is to make an index.html with a section were all the views are loaded, when a user wants them. This though creates the problem that when a user types a direct url like: www.foo.com/bar - it doesn't point him to the view bar. I know how to point the user to a webpage with a router file, but I don't know how to do it, when the view is only a part of a page and it is opened in another page. Can I do this with the router, or how can this be done?
For clarity I am running php on the server side and I use AJAX calls to get the views.
Since all the detail pages do not have a real page server side you need a server side component that rewrites the URLS to a frontcontroller page that loads the index.html and that bootstraps that page with the correct view.
I suggest to take a look at the mini PHP frontcontroller component Silex
If you do not want to use such a component you can always do this using something like apache rewrite rules and your own PHP landing page. This is rather simple for smaller MVC websites. If you're going to build a bigger one I suggest to pick a few smaller frameworks that each do one thing well. I have done this using Silex and Twig on the server side and jQuery and Knockout on the client side.

Categories