When adding an image by nodejs in Angular project's assets folder Angular needs a rebuild to show the image by path, how can I get images without a rebuild?
I suppose that you are talking about ng serve and not actual deployment.
The assets are meant to be static updated at build time (ng build or ng serve).
I would upload the images to a different directory outside of angular and fetch them from there in your angular app as is described at this link here
Related
I was trying to deploy my MERN based E-commerce website on render.com, after the render terminal shows the build was successful the the webpage shows the error as,
{“message”:“ENOENT: no such file or directory, stat ‘/opt/render/project/src/frontend/build/index.html’”,“stack”:null}
I’m a complete beginner to render and MERN too,
I have no bulid folder in my local
then I tried to create another test app by npx create-react-app test to check if build folder is actually present in there or not, But it is not there, I’m totally in Confused now…
I’m Giving my repo here → stunning spark
I just want to have clear answers for my questions(Please!!!)
Things I want to change in my directory to deploy and host my app Successfully.
Things Need to be configured in the render’s settings
Thanks in Advance!!!
I just want to deploy and host my application on render.com
Just run npm run build into your frontend folder and do check you have removed the "build" keyword from the .gitignore file because it won't let you push the build folder to GitHub and you are good to go.
We have just a single webpage with some links on clicking them it will redirect to different sources. As of now we are using "npm run build" to create the production package.
But because of the build files having dependencies with node, i cannot host it in a particular server.
Is there a way to create the Reactjs production build without using node ?
I suggest using Netlify to host your react app easily .
Below are some resources that can help you along the way.
https://www.netlify.com/with/react/
https://www.youtube.com/watch?v=sGBdp9r2GSg
You can have a build and upload it manually to your Netlify account,
You can use the CLI (netlify-cli) or you can your account to git .
Similar approach can be followed with git pages for example.
What packages do you have in your package.json file? Did you use a React project template that uses Node server-side features? It seems like you want to host your React project statically, not necessarily get rid of Node and npm.
For example, I've worked on lots of React projects using npm and create-react-app that we were able to host with a .NET backend and Microsoft IIS (instead of Node). The output is .html, .js, and other static files that you can host anywhere.
When you build a react app, the files at folder build contains everything it needs to run
If your hosting server hasn't integration with CI/CD, then you must deploy manually only the build folder, not the root folder (the folder that contains package.json).
I believe your issue is just a confusion/misunderstanding on how react works, how to deploy it, and how to run it.
React needs to be built on an environment where node, npm, and other tools are available. It can be on a build server or in your local machine.
After built, react app is just a folder with a bunch of html, css, js files which will run on the client browser, so, there's no dependency on NODE anymore.
These static files must be served with a simple static file server (apache, nginx, iis, etc),
I recommend you build the app locally on your machine and then deploy manually to your host through ftp, ssh or web interface.
If react is overkill to your needs, then don't use it.
The best approach is to host it in a cloud service that can do the full CI/CD integrated with git, all automated (Google GCP, AWS, Azure, Netlify, etc)
I have Angular 10 app with Node.js, Express, hosted on Azure DevOps. It has a lot of modules from Angular Material library which creates vendor.js bundle with size about 28 MB.
I am a beginner with Azure hosting.
The issue is, when deployed, the app loads very slow - about 3-4 seconds, and the size of the main.js bundle, is 18MB.
I saw that the frontend files were not send as zipped files when deployed to Azure.
So I installed gzipper npm package and now I have the original files and their zipped versions in the dist folder.
I also set this command in my package.json in order to optimize the build process:
ng build --prod --aot --build-optimizer && gzipper compress ./dist
But still, when compiled on localhost, the size of the main.js bundle is about 335KB, and when deployed on Azure, its size is around 18MB.
I can see that the zipped (.gz) files are send to Azure, but I think Azure does not serve them, but instead, it serves the original files with the original size.
The vendor.js file is not minimized, not uglified, I guess I could do it but then Azure will serve its minimized version, not its zipped version again.
What I should do in order to enable Azure to serve the zipped versions of front end files?
I am not very familiar with Azure settings at all.
Is there some easy setup that I could turn on so I can force Azure to serve the zipped files, instead of original?
Shouldn't be this set by default?
Any help would be very much appreciated.
I'm new in Angular and NodeJS. I finished all the basic documentation, and now I'm doing tutorials. My question is about the architecture.
Following the angular tutorial, you create a new server:
ng new new-project
That creates a whole server listening to port 4200, you learn and work with angular, learn about directives, etc.
Then you create a server with node, configure routes, etc.
But how these two servers live together?
What do you recommend me to join them?
This is a node server. The angular part are just two files
This is the server created with ng serve. The angular part is so much complicated
Angular project is not a server. Angular is framework to create front-end page/app. Angular-cli command ng serve is used to build application and start a web server on localhost.
When you build your page with angular use angular-cli command ng build --prod to build your page ( more info about ng build command). The build artifacts will be stored in the dist/ directory of your project.
If you want to host angular page with node - copy file from projektFolder/dist to catalog when node can have access to copy files. In node you can use express library to host static files:
app.use('/myangularproject', express.static('myangularproject')) //host static files`
More info about hosted static files in node and express
EDIT
You use Angular CLI to build an angular application. This is an additional tool for working with angular and you do not have to use it.
Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box
ng serve
ng serve is a tool from angular cli. When you call this command your project is build in memory and serve it via webpack-dev-server. It is used for quick preview and development of the project. If this command is confusing for you then you can use the npm script npm start.
The CLI supports running a live browser reload experience to users by running ng serve. This will compile the application upon file saves and reload the browser with the newly compiled application. This is done by hosting the application in memory and serving it via webpack-dev-server. doc
ng build
ng build compiles the application into an output directory.
Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
When you use command ng new Angular CLI add all necessary files to develop your application. Some of them are used to configure the project e.g tslint.json, tsconfig.json, angular.json ... Do not host these files only result files from the use of the ng build command (/dist directory).
Angular CLI compiles your project into several files (try ng build and look how many files do you have in /dist. You must host all of them. These are static files. You do not need a special server like php files. You can host them using a regular file server. I don't know what you concern use in the node to host static files. If they use express you can use express.static(). More info at the top.
I developed an application in angular2 and now I need to deploy it.
Currently I have a wwww root folder containing:
html files
js files (generated from typescript)
css files (generated from scss)
/node_modules/ folders
/bower_componenets/ folder
The last two folders (node_modules & bower_components) are very heavy (300 mb and thousands of files) and it is very frustrating copy them using FTP.
Is there a way to keep only the needed files?
Thanks a lot
You can use gulp for creating bundle from the libraries into single file ex. vendor.js. Also deploying via ftp is very primitive. You should put your app on GitHub or Bitbucket and then log in to the server and pull your repository there and because you don't put the libraries folders into your git repository you will install the libraries on the server. If you want to go more advance you can use tool like Jenkins combined with gulp task for building your application. Jenkins will build your application automatically and deploy to your server on every push on your git repository
The following question could help you if you want to use Gulp:
How do I actually deploy an Angular 2 + Typescript + systemjs app?
Note that some answers are for beta versions and packaging changed for RC versions.
Angular-cli could also help you to build your application within the following command:
ng build -prod
Moreover using tree shaking could be interesting to minimize the weight of JavaScript files. See this article for more details:
http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/