Whenever I run
$ npm run build
on Nuxt SPA mode it generates a ./dist folder and ./nuxt/dist folder.
What's the use of ./nuxt/dist?
./nuxt/dist folder sample
The dist folder contains html and js files then you can use it to deploy to server and run as statics site.
Nuxt.js lets you upload your dist files to your CDN for maximum performances, simply set the publicPath to your CDN.
export default {
build: {
publicPath: 'https://cdn.nuxtjs.org'
}
}
Then, when launching nuxt build, upload the content of .nuxt/dist/client directory to your CDN.
Ref: https://nuxtjs.org/api/configuration-build/
The contents in the nuxt/dist folder are what is going to be served up when you are in production. It contains an optimized code to be served to your users.
.nuxt/dist is for server side rendering it will be use when you run npm run start on your server and it will start listening on localhost:3000
Related
Does build/index.html generated after npm run build serve as a standalone webpage or does it only work with serve -s build.
index.html file returns blank page and on inspecting the page it shows: "main.17cbfec0.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND"
You should serve the entire build directory, not just specific files as the index.html file relies on various JavaScript bundles generated by CRA, which are all located in that build folder.
After running npm run serve it gives an address like http://localhost:8080 and it works, this address is targeted the root folder of local server but my project exists another folder like http://localhost/vue
And my question is how the address http://localhost:8080 works and where is the actual index.html? Since my actual project placed in localhost/vue folder! and the address should be http://localhost/vue
I think you are a bit confused on what is going on in the background when you use serve.
When you are running the command npm run serve, your project is getting built by Webpack and then "served" via a local http-server. This server is using your project's build folder as it's root.
It seems like you have created a folder named localhost as out of your comments here. http://localhost is not a folder called "localhost" in your computer. In fact, it is just a name for your internal ip: 127.0.0.1. You can test this by going to 127.0.0.1:8080 and seeing this is the same as http://localhost:8080
in programmatic terms, one could say the following:
localhost == 127.0.0.1
That out of the way, you seemt to also expect there to be a sub-folder named vue, since that's what you have in your localhost folder. Knowing the above; http://localhost is not a folder localhost on your pc. It is however the folder the http-server has chosen, in this case, vue chooses the folder /dist inside your project folder.
Example: Your project folder has the following path: C:\Users\Admin\Documents\myProject
When you then run npm run serve in that folder, the vue http-server will serve (host) the folder C:\Users\Admin\Documents\myProject\dist
This means http://localhost == C:\Users\Admin\Documents\myProject\dist\index.html
However, if your goal here is to have your project served as: http://localhost/my-custom-sub-folder
You will have to edit the vue.config.js for your vue project by adding: publicPath
vue.config.js example:
module.exports = {
publicPath: '/my-custom-sub-folder',
};
the index.html file should be by default placed at the root of your project in the "public" folder
I tried to run index.html inside dist folder in the browser but its not working, unlike the angularjs application where we import the script file in the index.html and the application simply works.
Why we can't do that in the Angular Project as there are some javascript files which are imported in the index.html same as any other javascript project.
You can do that in Angular application as well. You need to install http-server for that.
Follow the below steps-
Install http-server from npm server using following command-
npm install http-server -g
Generate the build in dist folder using command-
ng build --prod --aot --output-hashing=none
Run the command to run the project from dist folder-
run http-server ./dist
This will start serving your project from dist folder.
When index.html is being loaded directly in the browser, it doesn't use the http protocol. It is being loaded over the local file system over file:/// Browsers don't allow direct access to the .js files from a file system because of the security reasons.
The file system is not providing needed features of a server which is required. Github comment with some more details.
At a minimum, a simple static HTML server is required to run the Angular applications.
Angular apps are perfect candidates for serving with a simple static HTML server. You don't need a server-side engine to dynamically compose application pages because Angular does that on the client-side. Read More
I am running an angular 7 web application that has a dist folder with bunch of java script files that are not bundled. I would like to bundle all the java script file inside the dist folder in one java script file to minimize the http request when I load my web page
I have tried the following:
npm run build --aot --buildOptimizer --prod
I am expecting to see bundled files in dist folder
Your files will not be bundled to a single file. At least several files will be available like main.js, vendor.js etc.
However, if you want to pass building options like --aot you have to run
ng build --aot --prod
npm run build will run exactly the command defined in package.json.
I have a simple Angular 4 frontend as well as a node backend which is hosted separately on Heroku.
I deploy my Angular app by running ng build and copying over the contents of the dist folder to the server.
I have since then decided to integrate the backend into the front end so it's all just one project instead of two.
I can easily run node server.js on the root and it runs perfectly on my localhost.
But how can I deploy this to my server? I obviously can't just ng build and copy over the dist folder because that only builds the client folders and files.
Could I just copy over the server folder which holds the routes as well as the server.js file along with the client files and then somehow tell the server to run server.js when the site is loaded?
I use FileZilla to transfer my files onto the server.
Questions:
How do I deploy my angular/node app with FileZilla?
Which files/folders to I copy over with the client files?
If you are using Angular CLI, run ng build command to generate the dist folder.
Copy the dist folder to the backend server nodejs project.
Serve the dist folder using your Nodejs code.
If you are using ExpressJS. This can be done in a single line
app.use(express.static('dist'));
Install Heroku CLI and follow the tutorial to deploy your app: Heroku NodeJS Tutorial
You don't need to build the node app. Node runtime can compile the javascript on the fly.
The build step in angular packages up your code into one file. There is no equivalent in node as there isn't any point. The reason angular minifies and packages a file is so you can download it quickly. You never download the code from node.
On Heroku it's really easy, you don't need to copy anything over just run git push heroku master from the root of your node folder as per the instructions here https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app
Just make sure that in your package.json you have all the modules you rely on. It might work locally if you have npm modules installed globally but they also need to be in the package.json so heroku can download them by running npm install