Integrating Aurelia in existing MVC Application - node.js

I have an application in MVC 4.5 using VS 2015.
To this existing application, a new module has to be developed and what I'm trying is to develop this using Aurelia framework.I had fair bit of experience in aurelia framework.Hence I want to integrate our existing MVC application with Aurelia but unable to achieve this while routing.Hence posting this here in this platform.
These are the links that I went through for this purpose :
- Link1
- Link2
- Link3
- Link4
- Link5
To some extent I'm able to achieve this.From my partial view when the request is sent to main.js setRoot to app.html, this routes to app.js, but any kind of code written there results in Invalid Token Syntax error even if I write just one line of code in app.js.
Also, trying to set route in app.js results in route not found error :
This is what I tried:
Created an standalone aurelia app, wrote code in app.ts and was able
to render grid chart in corresponding html(app.html).
Created an MVC application(followed one of the above link) by adding one view , then routing to app.js through main and was able to render the page.
Also, I tried with normal routing like this in app.js.It resulted in error as cant find route.
What I'm ultimately trying to achieve is , when I click on any sub-tab(as I've Tab/Sub-tab views) and my partial view(cshtml) gets rendered, it should route to the aurelia app and render the content in that particular section with result.
Is this feasible or am I missing something here?? Any help would be highly appreciated..

Related

How to render with cache in nodejs?

I am making a web that is generated on the server. I am looking for information on how to make both the header and footer static (cache) after the first call to the server. For example:
1: site.com/home ==> should generate the header, home and footer
2: site.com/privacity ==> it should generate only the privacity but not the header or footer because it was already obtained in the first call.
In Net C# I have seen that there is BLAZOR (https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-6.0) with its dynamic routes but in Nodejs I have not found something similar. For example I have found handlebars.js but I see that it renders everything in each call as RAZOR would in Net C#.
Could you give me a scope if it is possible to do this similar to an ssr but with cache in header and footer.
I am attentive to your suggestions.

Python2 connexion framework - controller in directory structure

I am playing around with using the connexion framework to setup a REST API access for my application.
My application is is built on python2, I installed the connexion framework for python2 and played around with the yaml file via the editor (editor.swagger.io). I downloaded the Python Flask server code, converted it to be compatable with Python2 and tested for a single controller.
When the controller is placed in the same directory as the place where the server is run. Everything was fine - all routes were added and working as expected. I then proceeded to split the controller based on some business logic and wanted a tree structure for each controller.
Something like
myapp/api/magic1/magic1_controller.py
myapp/api/magic2/magic2_controller.py
and so on.
This does not work for python2. It seems to work for python3. Any ideas why?
I get the following error from logs
DEBUG:connexion.api:Security Definitions: {}
DEBUG:connexion.api:Validate Responses: False
DEBUG:connexion.api:Creating API blueprint: /api
DEBUG:connexion.api:Adding swagger.json: /api/swagger.json
DEBUG:connexion.api:Adding swagger-ui: /api/ui/
DEBUG:connexion.api:Adding /api/magic1/{name}...
ERROR:connexion.api:Failed to add operation for GET /api/magic1/{name}
In the yaml config file I add the OperationId as api.magic1.func1() and so on.
Following the information you provided here the operationId should be set to api.magic1.magic1_controller.func1 and not api.magic1.magic1.func1().
You are missing to provide more details about your problem. Code snippets would help to guide you in a more detailed solution.

nwjs reactjs, confused about my context. Document is undefined

In my nwjs application i am using React to build my UI. Currently, React is being loaded via a <script> tag in the main file, index.html. index.html has another <script> tag which loads main.js containing code which defines and renders my React components as well as requiring (require()) a few Node modules such as "fs" and "McFly".
This all seems to be working, however when i try using another node module (react-inlinesvg) i get an error, "document is undefined".
Having looked online for help, i have come to the conclusion that React now believes that it is being run on the server? Which is odd, as before i started using the react-inlinesvg module it was happily rendering components using React.render (clientside rendering).
If you need any more context or information then please ask.
It could be that you are rendering on the server side, or also that you are rendering both sides. In the second case you could simple nest the line that is causing you error with:
if (process.env.BROWSER) {
the line causing the error
}
If the error disappears, it means that you are on the server side also!
I hope this helps...
Basically if you code is universal (or isomorphic, if you want...) with this check you can execute the code only on client side, you want to do this to use a particular style-sheet for example:
if (process.env.BROWSER) {
require("../style/main.scss");
}
Naturally if you want to do stuff server-side you can check
if (!process.env.BROWSER) {
}
if any one face this he can solve it in 2 ways:
Solution 1: if you are using nw.js 15 or above try to enable mix context mode:
in your package.json add this flag:
"chromium-args": "--mixed-context"
Solution 2: expose document to the global object using this hack:
global.document = window.document;

What is a recommended way to get data into your meteor template from the front-end for a famous surface?

I've been following along with the book Discover Meteor from https://www.discovermeteor.com/ and I have built the tutorial project called 'Microscope'
This uses iron-router and Meteor templating system to render out the front-end. I want to redo this project using famo.us for the front-end but I am unclear on how I to do so.
I am aware of a package called famono. mrt add famono. Using this package I can integrate famo.us and draw surface to the screen in a meteor project. It also allows you to render templates to the screen.
But I am confused on how to redo the project so the router - routes to render a famous surface with the data.
Also I am wondering if the templates will still be reactive.
If someone could provide insight on how to redo the 'Microscope' project to use famo.us on the front-end I would greatly appreciate it!
Thanks
UPDATE (to be more specific)
I have been trying to figure out how to integrate famous with templates and routing, and I have no clue how to do it.
I use iron-router to handle my routing which chooses which template and data to render like so:
Router.map ->
#route 'posts',
path: '/',
data: ->
Posts.findOne()
So this will load up the posts template with Posts.findOne() data.
But I know with famous I can generate surfaces from templates on the front end like so:
background = new Surface
template: Template.post
data: ??? (Posts.findOne()) ???
mainContext.add(background)
Because javascript is what is going to load the final template into the view, what is the recommended way for me to get the data for that template, should I query the database from the front-end by setting up special subscriptions?
Typically I render the data into the page from the router on the server but...
with famous, I just have to load the main template and let famous load the rest of the templates. The only thing left is getting the data for the other templates. What is recommended?
I would start by looking at https://github.com/gadicc/meteor-famous-components/. That package will do all the work for you if you want.
I have never used the Surface template argument but I believe that is a one time load and will not update on data invalidation (data change).
Or u can take a look at working examples )
https://github.com/sayawan?tab=repositories

How to access the "foo" controller in the jhipster-sample-app?

I'm starting to learn AngularJS and as Java/Maven/Spring developer, the jhipster yeoman generator looks great.
I've cloned the jhipster-sample-app, imported it into my IDE and started it via Maven command mvn spring-boot:run. (I know that when I want to generate my own app, i can use yo jhipster)
I am able to browse the app at http://localhost:8080/ and also login as 'user' and 'admin'
How do I navigate to the Foo entity in the sample app?
I've tried http://localhost:8080/#/foo which redirects back to the homepage.
On the server side, I see the sample app has a Foo entity, repository, and resource. On the AngularJS side, I also there is a Foo controller, router, service, and view.
What am i missing?
The sample is just an example of the "default" application, the "foo" entity is not complete.
If you use the generator, here are the steps to make the "foo" entity working:
http://jhipster.github.io/creating_an_entity.html
There are basically the same steps to do on the sample application: you need to set up the database tables (in Liquibase, they are just commented), and import the JS files in your main app.
But you are right, we should generate a complete entity in the sample application (or no entity at all!), but not provide this half complete result.

Resources