I'm trying to "run and autocompile" a mean server whit Angular4 .
I launch server with this command:
ng build && node server.js
which start correctly the express server, but! Every time I make a change on source file it does not compile automatically as this command do(ofc only Angular2)
ng serve
Well I know that ng serve only compile and start Angular2 server but it removes dist folder too !
I followed this tutorial for my server:
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
Thank you!
Andrea
Ok, I solved the problem.
ng serve delete the dist folder on root -> node server.js search it and it fails.
the solution is: run 2 console.
the first is for
ng build --watch
process, which look for changes and recompile it,
the second is
node server.js
Andrea
ng build is for bundle, it is meant to be pre-compiled.
ng serve is for development process, which mean that ng serve create an instance of local development server that monitor your file changes and perform any update for any changes that you've done. So to put it shortly, what you see is working by design or it's intended to do so thus if you want to develop run ng serve; but for production run ng build
Related
I'm using VueJS and Nuxt to build myself a website. I have encountered a new problem.
When I run npm run build and then npm run start everything works fine. Everything is loaded and ready. Everyone is getting a /dist folder when they run npm run build but I did not. I guess I don't need it if npm run start works just fine without it.
Just checked that I have no index.html in my project but how does then the npm run start work?
When I upload the built website to my Bluehost. It only shows me the folder list and not a running website. I should npm run start from bluehost? I have no idea what to do next. The image is below.
Is npm run generate the only normal way to upload a website?
First thing .. npm run start/build/dev etc are just NPM scripts that are specified in the package.json under the scripts section. They can be anything, but according to Nuxt docs this is the default:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
}
So that's what's actually running when you doing those.
That said, I think where you are getting confused is that there's two ways to host these projects. As a server, or as a static site.
When you are running it locally you are running it as a server and that's why you can browse to localhost in your browser and see what you are working on and that's why there's no index.html.
It's fine to do that and then host it statically though. That's where the building part comes in. Usually webpack compiles everything into a bunch of normal html and other assets that can be read by any browser (without the need of them being actively served (like what your dev server is doing locally).
Try:
Setting target: 'static' in your nuxt.config.js
export default {
target: 'static' // default is 'server'
}
and then run your: (which is actually running nuxt generate)
npm run generate
The other option is to host stuff online as a running server, which you can do on hosting like Heroku or Digital Ocean or AWS .. and you usually make a build script that will set it up and serve it, like how your local dev server was, but online. But often hosting things statically is fine.
Hope that sheds a bit of light on the situation. Write a comment if you still having trouble.
TLDR: both generate and build are fine but they aim at different results.
You'll need to either set target: static or target: server respectively for it to work.
This is an excellent answer that can explain some of the differences and various ways to build your app (npm run build vs npm run generate): https://stackoverflow.com/a/63638062/8816585
Here is an official article of the benefit of target: static.
I'd recommend going full static too, if you can. It will be cheaper and can be served with a CDN easily (like on Netlify), hence more performance and less point of failure.
Of course, there are some exceptions. If your app is password protected with a lot of private content, you may find no benefit into a static build. If it's fine to display the content and you know what it will be ahead of time (like a blog), go static!
PS: you do not see any /dist directory probably because it's ignored in your .gitignore (default when you generate a Nuxt project).
Relevant pages in the documentation:
https://nuxtjs.org/docs/2.x/features/deployment-targets
https://nuxtjs.org/docs/2.x/concepts/static-site-generation
https://nuxtjs.org/docs/2.x/concepts/server-side-rendering
Please help with my below questions:
"npm" is the one which comes when we install Node.js. Am I correct?
"create-react-app" package installs/loads the Babel & Webpack which are required for our React project. Am I correct?
When will the React code gets compiled & Translated? Does the below points are correct?
a. After creating React project and developing some code, we are loading our application in browser by running the "npm start" command. So while running this command, will the Babel is going to compile the React code and convert it to JavaScript code which has ES5 standards? Does this conversion to ES5 happens when we run the "npm start" command?
b. Also I learned that Webpack is going to merge all various files within the React project to a single .js file. So does this merging of all the different files by Webpack will be performed when we run "npm start" command?
So if my above understanding is correct, the React code will be Compiled, Translated & Merged into a single file when we run "npm start" command. Correct?
npm start is really just a command that exists in the package.json which can be configured to do whatever you please. It is typically use to kick off all things needed to "start" the app. In the context of a react app created using create-react-app the start command will call react-scripts start and that points to a file called react-scripts which sits in your node_modules/.bin. If you want to see everything that happens you can read through that file.
In short tho, you are correct that it will use babel to transpile the code to something the browser understands, it will use webpoack to create one bundle file (or multiple if you are using code splitting). It will also start a webpack dev server which will usually listen on port 3000 and it will open your default browser to your app. These default settings can be overwritten in the package.json.
Hope this gives you some clarity.
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.
Recently I begin to use vue-cli to generate a pure front-end project(not use npm express anymore).
When I on the develop phase everything is fine.Cause I can use the magic.
npm run dev
And then I want to run the project on the production environment,but I'm not sure this way is a good idea.
So I google some method to teach me how to deploy the vue-cli project,but I only got
run
npm run build
After that I got a dist folder,and what is the next step?
is there a way like run the node express project ?
node ./bin/www
please help me.
I've got the answer,and don't need the hosting. Here we go.
Step 1 : Build the project and get the dist directory.
Step 2 : Let the nginx reference to this dist directory.(Just treat it like static files)
Step 3 : You can use browser to browse your website now.
Currently I made a simple app with react, it works perfectly and I use react-scripts. I installed React by following the Facebook github page, and it written that "When you're ready to deploy to production, running npm run build will create an optimized build of your app in the build folder. ". After I press npm run build, a folder build created, but I do not know what to do with this folder. I tried some method like, move all folders except build and npm run, but it did not work. Anyone can explain me what is this folder "build" ? Thank you
npm run build builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
npm run build creates a build directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file.