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.
Related
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.
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
I am pretty new to web development and I was asked to create a single-page application with tools of my choice. The only requirement is that it has to run locally on a GlassFish server (in NetBeans: Java Web > Web Application). I use the create-react-app starter kit provided by Facebook to build the application. When I run npm run build I get a build folder containing an html-file and a js-file. But when I double-click the html-file, the browser opens and just shows an empty page. Does anyone know what I have to configure in order to get a bundled html-file that shows the application when I open it?
Thank you
After running "npm run build" on your create-react-app generated code, it displays instructions to help with just this. It says something like:
You may also serve it locally with a static server:
npm install -g pushstate-server
pushstate-server build
The first command, "npm install -g pushstate-server" only needs to be run once, as it installs "pushstate-server" to global NPM. The second command "pushstate-server build" runs the simple static server, pushstate-server, and serves up any content in the "build" folder at http://localhost:9000. You can change the port number if you wish, by adding it at end of command line: "pushstate-server build 1234"
UDPATE: Serverless method...
If your goal is to run the page from the file system, and not from a web server, you'll need to tweak the build/index.html to fix the paths to your JS and CSS (and less importantly, your favicon.ico). The index.html generated by create-react-app expects your JS and CSS to be at "/static/...". However, when you open from the file system, that path is not correct. If you remove the leading forward slash, making the URLs relative, your page will load properly from the file system:
After running "npm run build", open the generated "build/index.html" file. Remove the leading forward slash from "/favicon.ico", "/static/js/main.[random string].js" and "/static/css/main.[random string].css" and save your changes (so that the all read "static/..." and not "/static/..."). Reload/refresh the page in the browser.
I want to minify all .html files in a folder (and any folders within) using npm run script. Ideally, all .html files should be overwritten (if that's not possible, a new folder is acceptable). It is assumed that there will be non-HTML files in the input folder.
npm library minimize works only on per-file but not on folders.
Another npm library html-minifier does accept folder as input, but fails if there are any non-HTML files present in the input folder:
html-minifier --input-dir ./test1 --output-dir ./test2 --html-5 --collapse-whitespace
I need this to minify my static website's HTML files.
Since posting original question here on SO, html-minifier added the feature to ignore the non-HTML files. Now you can set directories and html-minifier won't error-out when it encounters non-HTML files.
Usage example, taken from my working npm task:
html-minifier --input-dir ./public --output-dir ./public --collapse-whitespace --file-ext html
Let's minify all our static websites' HTML files now!