i'm currently developing an angular frontend application, running it locally in the ide without a webserver to provide some images. For running the app i use ng serve.
I have no idea on how to use images. played along with some path stuff .. but without success.
The images are stored in app/img
thx.
Place the images in the src/assets folder.
If you have an image named example.png. The URL would be:
/assets/example.png
If you want a different location. You can add additional assets locations by modifying the angular.json file.
To add an app/img folder:
"assets": [
"src/favicon.ico",
"src/assets",
"src/app/img"
]
Related
I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.
I'm using Electron to generate a kind of "website container" for Windows because the users of my app needs to run it locally (they don't always have internet access) but they don't have the possibility to have a web-server on their computer and there are CORS issues if they just open the index.html file directly through the browser.
The Electron generated application is used as container, users are getting their specific files (folder with HTML/CSS/JS files) on github and they put it on the indicated folder in the Electron App. The main.js script in electron only run a Browser window and load the HTML file.
As web application are loading a configuration file modified by the users, they must have access to application files, i can't send them a packaged application.
Currently i'm using Electron-builder with this configuration with "container" folder contains all the website file
"build": {
"appId": "container.app",
"win":{
"target": "portable",
"icon": "favicon.ico",
"asarUnpack": [
"container/**"
]
}
}
This is working fine but there are lots of files in the Electron folder besides the website files:
So it's not really intuitive for users, they have to go to "resources/app.asar.unpacked/container/" folder to update their files.
Isn't their a way to have an ouput like this ?
Have you considered using extraResources in the package.json instead of the unpacked asar? https://www.electron.build/configuration/contents
"build": {
"extraResources": ["./extraResources/**"]
}
That will put your files in the "resources" folder instead, and you can fetch them from your code.
Goal: I have created the start of a React project and wish to test it on my server (hosted by goDaddy, uploading via cPanel). My app works fine in Development Mode.
Question: I have ran npm build which has created a build folder, but what files am I supposed to upload to my server? I tried putting the entire contents of the build folder on, but it still says the site is not launched. Is this because there is no index.html file generated? Currently my build folder contains: assets.json, LICENSE.txt, package.json, server.js, yarn.lock, chunks/ and public/. Is there supposed to be an html file generated? Or should these files be sufficient to deploy the website given that it works in development mode?
Thanks for bearing with me, this is the first time I have tried to deploy a React App and likely have several fundamental misunderstandings of how it works. Also if anyone is willing to chat for several minutes so I can ask a few questions about my project and react let me know - much appreciated!
Hello
Dear,
If you can try to change your package.json file and add ("homepage": "http://yourDomain/",) like this
"version": "0.1.0",
"homepage": "yourDominUrl",
Like
"homepage": "http://yourDomain/",
and
build again
npm run build
and the build folder is only should be uploaded file
Your answer is much more simple than appears: Just run npm run build, then just upload that whole folder to your GODADDY server. Importantly, you must place your index.html (or app-name.html) directly on the / public path defined by your URL's DNS. So, Top-level has your single entry point index.html that points to folder build/ to get your xyx.main.js and the xyz.main.css ...
and that's it! easy as pie
I have an app in Angular 2, decided to add real server, Node JS, to upload documents and do other things.
Browser => Angular [localhost:4200/api/documents] => Node [localhost:3000/documents]
This is how I start them together using scripts in package.json
"scripts": {
"server-start": "gulp",
"client-start": "ng serve --verbose --proxy-config server.conf.json",
"start": "npm-run-all -p client-start server-start"
}
So, when I run npm start it starts 2 parallel processes - Node JS using Gulp and Angular using ng serve. Angular is a front end, but all URLs that start with /api get redirected to Node. Here is how it's done with server.config.js
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
Node JS receives stream from Angular with image and saves it in Angular assets folder, so uploaded image should be available in Angular, but when I try to open uploaded image in browser it returns me 404, not found. Just in case, this is part of my .angular-cli.json
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico",
"service-worker.js"
],
"index": "index.html",
"main": "main.ts"
Example, I have existing image that was there before ng serve
F:\Node\cms\src\assets\uploads\1.jpg
available at, it works
http://localhost:4200/assets/uploads/1.jpg
I upload new one to the same location
F:\Node\cms\src\assets\uploads\5.jpg
but it's NOT available at
http://localhost:4200/assets/uploads/5.jpg
When I restart my servers image becomes available. According to this discussion ng serve performs deployment of Angular app in the background, and folder dist is empty, all images are taken from memory, and any new images dropped into assets won't be available, correct me if I am wronng.
Question #1: is built-in Angular server able to handle dynamic images if they were added when application is already running in memory?
Question #2: looks like in complex apps ng serve brings more troubles than benefits, is it worth to try to make it working or you'd recommend to start using ng build instead?
when running your application, everything points to build folder. Not "src"
You probably are wiping out the images each time you run my serve or need to store them in a different location.
You are technically storing images on a "server" so I recommend using node to retrieve the paths to these files.
You should use ng build instead of ng serve. ng serve is meant for dev purposes. See https://github.com/angular/angular-cli/wiki/serve
Additionally after running ng build you will need to have the dist folder on an actual server. Here's an example from the Angular wiki
https://github.com/angular/angular-cli/wiki/stories-disk-serve
ng build --watch
lite-server --baseDir="dist"
You could also have node serving the dist folder using the static method that is built into node.
The line to add would be either
app.use(express.static('dist'))
or
app.use(express.static(path.join(__dirname, 'dist')))
See https://expressjs.com/en/starter/static-files.html
I prefer to do ng build -aot to get the bundle size as small as possible and then serve the dist folder with nginx.
Ok, learning here. Installed the default vue-cli app on AWS. I do a npm run build. When I launch the default index.html I'm served a blank page. If I go into dist, there is another index.html, that serves links to js files, but still a blank page.
I'm guessing webpack wants me to launch an index.html, but don't see how I can hit that with a browser. No errors anywhere. But no Hello World either. thanks for help.
What I'm seeing in the browser:
<!DOCTYPE html><html><head><meta charset=utf-8><title>hello-world</title><link href=/static/css/app.87e65e7c83fb67c04e58d4461a7fd8e8.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.fa7eecfb52900d1cfb0a.js></script><script type=text/javascript src=/static/js/vendor.9baeef453ba99a70f46a.js></script><script type=text/javascript src=/static/js/app.cdfbb21001bbc43de4bc.js></script></body></html>
When you npm run build Webpack should produce an index.html file along with a static/ directory that contains all of your javascript and css. The link to static/ is an absolute link (i.e. http://example.org/static). When you try to open index.html as a file, the browser will look for the /static/ folder on the root of your file system, which of course it won't find.
To run it locally you need to fire up an http server locally. One option is to cd into the directory with a terminal app and run python -m http.server. Then go to http://localhost:8000/. That should work because the root of the directory tree will be the folder from where you are serving it.
Getting it running on AWS S3 will be a matter of making sure you get the static directory in the right place and get the links pointing to it. Hard to say exactly how without knowing details of how you are organizing the site in your bucket.
You can change how the static folder is saved in the webpack config if you need to: https://vuejs-templates.github.io/webpack/static.html
You will find a folder named /dist in your project directory.Just point the index.html file within the /dist directory and rest will work fine I think. I have just done that and it's working fine.
Hope it will work.
Thanks.