Angular dynamically change assets location - javascript

I am creating an Angular application that is used in Electron, and it has access to the users filesystem. The user will create a project within the app which will load files through http. When the project changes, so does the static files location, so is there a way to tell angular where the static files for the project are located as the user switches between projects? I don't think this is supported in Angular's angular.json file.
Is there a way to do this without having to write my own http server?
Note: The request are made from threejs which doesn't use the HttpClient service.

Related

Is it possible to get pages from remote file system with next.js

Hi I am quite new to advance frontend technologies and I have simple question.
scenario
I would like to use next.js and its feature: server side rendering.
I would like also to have my js, css and html files stored in outside of host machine where next.js is running. I want to have my files in azure blob storage. It is neccessary because I would like to have many SPA pages and single wwwroot directory is not enough for me.
Problem
By default next.js get its files from pages directory at host machine.
Is it possible to tell next.js to get files from other file system etc. In this scenario it would be azure storage. I could not find any example or extension point to do that.

Deploy angular rendered app on shared server

I created an Angular 7 app and built it using Angular universal to make it SEO friendly. However, as I was reading, it is not possible to deploy it now on a shared server (once build with Angular universal, otherwise it is possible), since it requires Node.JS to run the script file on server.
My problem is that my hosting plan is on a shared server so I will not be able to run it using Node.JS but I still care of having my app SEO friendly.
What can be a good solution?
Angular Universal renders your application in server side before serving the page (SSR). Indeed you will need nodejs to make it work.
You need to prerender your application as static files.
With #ng-toolkit/universal installed you should be able to prerender your application with the command :
npm run build:prerender
Now, you should see new folder dist/static , inside which all your application views should be prerendered and can be served as static files.

Spring boot and react running on tomcat

I am developing Spring boot application with react client using gradle. I am new to all these technologies.
Currently I am able to create war file which includes following folders:
META-INF
public (contains build of client part - index.html, index.js and other .js scripts)
WEB-INF (contains compiled spring boot backend app)
Currently, after deploying war to tomcat, I am able to access client static content on http://localhost:8080/app-name/public/. Also I am able to access routes defined in spring controllers on http:// localhost:8080/app-name/route (these are just for testing purposes, I want this commands to be accessed only through REST calls from client).
Now, what I want is make that static client content available under route http://localhost:8080/app-name/xxx-yyy/public
I don't know what is right way to do this (actually, only way I know is create xxx-yyy subfolder on tomcat a put public folder inside it. I think this is bad approach). Other way would be somehow forward from spring controller but I am not able to do that.
It is possible that this is bad concept and I should make it other way. I would be glad for any suggestion.
Thank you
I guess you are using create-react-app.
For production deployment, the React application consists of static files only. These files are generated with create-react-app : npm run build. Cf. the official docs about deployment.
So you just have to serve these static files in your Spring Boot app, for instance in the folder src/main/resources/static. Here is the documentation about static content in Spring Boot.
At the end, Tomcat will run dynamic REST web services (for instance at /api) and React files.
Note: if you are using Spring Security, make sure that React files such as index.html are publicly available.

how to use ember.js without server

I am following the ember.js example on this site (http://todomvc.com/).
I clone this project to my computer and just double click index.html and
it runs, as what I expect.
But in ember's guide, it tells me to install the ember-cli, and create a new project, then build it.
ember new myapp
ember build
I can find my files in /dist, but when I double click the index.html
it fails.
This post said, "You have to serve your directory with an http server."
Why do I need a server to run this project, instead of just opening it in my browser?
The example that you linked is using the old global Ember. This is very different from ember-cli which you are now working with. An http server is required because of the <base> tag in the index.html file that specifies the base URL to use for all relative URLs contained within a document. So when your app is trying to serve up the assets/app.js or assets/vendor.js, its trying to look relative to this base url, which is defined in config/environment.js. It defaults to /. So you need a server to respond to the resource requests for the assets. Notice that your assets folder is relative to the index.html file

Want to load same Javascript file in both client-side and server-side scripts on MEAN-stack app

I developed a MEAN-stack web app generated by angular-fullstack. I wrote a file, date.js, that appends some helpers to Date.prototype. I want to load this file to access these helpers both on the server (in the API handlers) and on the client.
Server-side code can load anything with "require([path/to/...]module-name)" whereas client side code gets loaded explicitly by
<java src="path/to/my-code.js"></java>
tags in the page.
My goal is to place data.js (and other common utilities) in a place where it can be easily accessed from either client-side or server-side code without having to maintain a copy on each.
While developing on my local box I solved this by placing it in my-app/client/assets/js/ where it can be loaded from the index.html page, and load it from server-side scripts with
require("path/to/my-app.../client/assets/js/my-code.js").
That works fine on my local box but wreaks havoc when I try to deploy it to Heroku. Heroku renames my-app/client as "public" so those server-side require() calls no longer work.
There has to be a better way to do this. Libraries like "lodash" are loaded both as Bower packages and as Node packages. Do I have to publish my little date.js library as a separate project available to both Bower and npm?

Categories