I started single-spa app from scratch following:
https://medium.com/#AndrewLocke/creating-a-single-spa-web-application-4e115802f474
I wanted to use angular, so I created another app using
ng new my-app --routing --prefix my-app
and app was working fine, then I've added single-spa-angular by
ng add single-spa-angular
and application stopped rendering, even calling angular.version from console in dev tools returns error: angular is not defined.
How can I render this application? Or have live reloading for development?
This is fine I guess. When you add single-spa-angular the angular.json is changed (check it in git). The application gets a new rendering mode. Just continue with the tutorial and finish configuring the apps.
Also check the package.json file for new scripts. There should be one build and serve script for single-spa and a different ones for standalone use.
Related
I'm trying to follow other people who had a similar issue like this one
Electron-Builder include external folder I wish i could be more specific on what my problem is, the reason is that i dont know whats wrong.
I am making a react app which has a server with an sqlite db and im trying to use electron.js to make it into an installable/executable
here is my dummy repo https://github.com/Juan321654/electron_react_with_build_installer_sqlite_db the master branch was just how to make electron work with react, the server branch is the one that i need help with
you can clone and just do npm i, npm run start to launch executable. npm run build to build
the code works fine in development mode and even after i make the build project with electron i can launch the executable and it works fine and it reads the data from the database, but as soon as i take the dist folder out of the project to send to someone or install the software, it stops working and it loads the app, but it does not read the data from the server/db, I am not sure if its missing node modules or the server folder, or maybe if im missing some kind of command in my scripts in the package.json?
I found an open source Ruby on Rails project that is created with command rails new myapp --webpack=react but I am only interested in the React part. How can I seperate it from the rest and enable it to run on its own?
The link to repo: https://github.com/vigetlabs/storyboard
For what I have done so far;
React related files reside in directory ./app/javascript/pack/ but npm script triggers Ruby application first. Ruby, somehow, starts the React application. This is how far I could come.
use create-react-app to create a new react app.
copy and paste /app/javascript/src to the newly created react app. maybe packs folder too.
copy over the package.json file content to get all packages.
do some testing/debugging
I created an application within an Angular workspace. When running
ng serve [application-name]
Picks up images and files in asset folder fine. Now I want to run the workspace with just
ng serve
I would expect through having the application lazy loaded the path would resolve but instead I get
zone.js:3243 GET http://localhost:4200/assets/terms.txt 404 (Not Found)
What is the proper setup to access assets of an application within a workspace?
EDIT After talking offline I think we've found a solution. I'll post it here and leave the below for reference even though the original answer I posted doesn't really apply to the problem.
You're trying to run multiple Angular apps and route between them via something like Firebase where you can direct different routes to different apps.
To get this to work locally for development you will need to run each Angular app separately on it's own port. I suggest you control the destination of the route in the environment files. This way when you are running locally you can point to the port the app is running on and then point to the endpoint Firebase uses in production.
Example environment.ts file in your root app
{
...,
OTHER_APP_URL: 'localhost:4201'
}
prod.environment.ts
{
...,
OTHER_APP_URL: '/otherApp'
}
Then in your component
....
import {environment} from '<path to environments file>';
#Component({
selector: 'my-component',
template: '<a [href]="otherAppUrl"></a>'
})
export class MyComponent implements OnInit {
otherAppUrl: string;
ngOnInit() {
this.otherAppUrl = environment.OTHER_APP_URL;
}
}
You will probably need to do something similar in the other apps so you can route from them to the root app or other child apps. You will probably also need to build the other apps with the --baseHref flag when you build for production so their assets are available. See here for more info from the docs: https://angular.io/cli/build
Old answer - doesn't really apply to the question
Looking at your repo I don't see the terms.txt in your root project's assets folder. I checked to see if it was in one of the other libraries in the repo but wasn't able to find it there either.
If this is an asset that is included or referenced by a component or service in one of your libraries you will need to copy that over to the library's output folder as part of your build process since that functionality isn't currently supported by the Angular CLI.
An example of a build script that might do this for you is:
ng build my-lib-with-assets --prod && cp -r projects/my-lib-with-assets/src/assets dist/my-lib-with-assets && ng build --prod
Don't forget that you need to build your libraries before you build your main project.
I'm working on an app with vuejs frontend and nodejs backend. My frontend makes API https requests to the backend. I've started my projet with vue-cli and webpack.
I need to get the backend API url from env variable (BACKEND_URL).
Since i'm using webpack, I added this line to config/prod.env.js :
module.exports = {
NODE_ENV: '"production"',
-> BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}
It works flawlessly in dev mode using webpack-dev-server. I pass the env var throught docker-compose file:
environment:
- BACKEND_URL=https://whatever:3000
But when I run build, I use nginx to serve the static files (but the problem is the same using visual studio code live server extension). I send BACKEND_URL env var the same way as before. The thing is now the process.env.BACKEND_URL is undefined in the app (but defined in the container)!! So I cant make backend http calls :(
I'm struggling finding the problem, please don't be rude with the responses. Thank you
They aren not "translated" during build time, this is what is happening with you. On a node environment, when you ask for process.env it will show all environment variables available in the system, that is true. But a web application does not have access to process.env when it is executing. You need a way to translate them during build time.
To achieve that you have to use DefinePlugin. It translates anything during build time and writes a magical string where this other thing was.
Using you own example:
module.exports = {
NODE_ENV: '"production"',
BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}
If you do this during build time, without DefinePlugin, webpack won't know what to do with it, and it is going to be a simple string.
If you use DefinePlugin:
new webpack.DefinePlugin({
"process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL)
});
By doing this, you are allowing webpack to translate this during build time.
Give this a shot: https://www.brandonbarnett.io/blog/2018/05/accessing-environment-variables-from-a-webpack-bundle-in-a-docker-container/
If I'm understanding your problem correctly, you're serving a webpack bundle using nginx, and trying to access an environment variable from that bundle.
Unfortunately, it doesn't quite work that way. Your JS file has no access to the environment since it's a resource that has been delivered to the client. I've proposed a solution that also delivers those env variables alongside the bundle in a separate JS file that gets created on container start.
From VueJS Docs: https://cli.vuejs.org/guide/mode-and-env.html
Using Env Variables in Client-side Code
Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:
console.log(process.env.VUE_APP_SECRET)
During build, process.env.VUE_APP_SECRET will be replaced by the corresponding value. In the case of VUE_APP_SECRET=secret, it will be replaced by "secret".
So in your case, the following should do the trick. I had the same problem once in my project, which I started with vue/cli and vue create project ...
VUE_APP_BACKEND_URL=https://whatever:3000
it's great news that Grails 3.2.1 now comes with an Angular2 profile, but I don't know how to use it.
The profile description tells me that there should be the standard command like create-domain-class, but when I create an app through
grails create-app test-ng --profile angular2
I get a working angular2 project, but it even seems that this project is not recognized as grails app. When I enter the grails cli, I only get the commands like create-app which are available outside of projects.
What am I doing wrong?
your grails create-app test-ng --profile angular2
command should have created three folders in your test-ng-project-folder:
client
gradle
server
change to server and start grails command
now you should have the wellknown grails project.
but i am still on the first steps of examining the new grails-profile. so i hope i could help you.
Nowadays this layout is called "multi-project". Separate 4 the client and server applications. To make things easier, the tasks test, integrationTest, and bootRun have been created in the client application to make executing those tasks easier across the whole application.
Since Gradle executes tasks synchronously, and the bootRun task will never finish, it is important to execute it in parallel. At the root of the project:
./gradlew bootRun --parallel
Opening things also separately by 2 instances of your IDE or preferred text processor.
see the docs
grails list-profiles
show list of available profiles, I suggest you use this because for example now angular2 profile is angular and angular1 is angularJS.