Why can't I preview Vue project locally? - javascript

From the Vue CLI https://cli.vuejs.org/guide/deployment.html, it stated that the dist directory is meant to be served by an HTTP server. But why can't I preview it from the index.html? Cause my understanding is that Vue is just a front end JavaScript framework, so one should be able to preview it from any browser. If am to create a simple vue project using a cdn, it can be directly previewed on the browser. But this is not the case for the vue project created through the CLI. Can someone explain this.

Take a look into the Chrome Dev Tools. You will see a couple of errors similar to those:
As you can see, there are a bunch of files that fail to be imported. This is because these files are not imported using a relative file path, but an absolute one (starting from root, as visible by the prepended / in all files in the index.html).
If you run a local server from the dist directory root will resolve to this directory, allowing the files to be imported properly and your site to be visible in the browser.
However if you simply open the index.html file in your browser, / will resolve to the root of your operating system, which does not contain the files. If you were to copy all those files into the root of your OS, so that the paths would resolve successfully, you would not need a server to view your Vue application.
CLI projects are built with the use on a server in mind. The idea is to just be able to deploy the files in the dist directory to a server and have a working Vue application.

Just to add to a great answer from #aside.
You can use a publicPath configuration option of Vue CLI and set it to '' or ./ - this should be enough to make it work from file system
The value can also be set to an empty string ('') or a relative path (./) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.
vue.config.js
module.exports = {
publicPath: ''
}

Related

How to run nextjs dev server with the config from another project?

I develop a nextjs application. Inside the root folder, I've made landing/pages/ folder and I want to run dev server with those pages using next dev ./landing. The point is to create a separate app using the same codebase, configs, etc.
Dev server runs properly, but most features don't work:
.env is not read from the root folder (the workaround is to use cp .env ./landing && next dev ./landing). but it's an ugly way to solve it
assets are read from public folder inside the /landing. But I'd like to use the public folder from the root.
I can't use components from folders that are "above" /landing folder in the project structure. The compiler throws an error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
Is there any custom configuration to solve the problem? Maybe there is another way to have something like two "pages" folders in which there is the same source code, but thanks to it I could build two separate apps?
I've pushed my current code to the following repository:
https://github.com/michalgrzasko/nextjs-2-pages-example
Just run dev server using yarn dev. To reproduce errors:
Uncomment process.env.NEXT_PUBLIC_APP_BASE_URL in landing/pages/index.tsx
Uncomment <Nav /> component in the same file
.env is not runnable files, if you will load from "somewhere" - you don't need it.
You should focus on the next.config.js file.
Check this, maybe will help.
Anyway, you will need:
-API from your second source(from where you like to load config)
-Load config every time once you dev build your project.
-use process.env.your_name in your classes/functions

Vue - How to locate and read file on root folder, after build process

I developed a web app that will be executed offline, from the SO file system. The client wants to add a file on the folder (along index.html) to be read by the web app. Is that possible?
I know that is possible to read files with javascript, but after the build process I don't know how to locate the file.
Depends on how you use Vue. For example, if you are doing a Vue CLI SPA project, then any file that's in the public folder beside the index.html can be referenced as if it was in the root folder of the URL you use (e.g. npm run serve -> http://localhost:8080 is the root; http://localhost:8080/additionalfile.xyz is accessible. It's another question what you can do with it, but it's accessible.)
More on the Vue CLI folder structure here

What is the difference between src, public, and build in folder structure?

I know what these files contain like build contains the minified file which is minified from src file. I need to know how browser works with it. I haven't uploaded my build file to hosting service yet my website got rendered. In the website, <script> SRC was linked to build but there was no build uploaded but a build was created automatically. this behaviour was observed in svelte. But I hope all framework does the same.
As far as I know, build tools like webpack, parcel, ...etc., use BUILD or DIST (Of course you can change it however you want) folder to store production ready build files of the project.
Files in PUBLIC are just copy & pasted to the build/dist folder when build process is finished. You can store index html, images, fonts, favicon or other static text files in there. They are not processed by build tools.
SRC folder is just for storing the whole project's unminified source code.
Most frameworks use 'build/dist - src - public' structure while frameworks like next.js uses root for storing project source code by default.
From the Vercel documentation found here https://vercel.com/docs/build-step "Vercel tries to automatically detect the frontend framework you’re using for your project and configure the project settings for you. If you’d like to override the settings or specify a different framework, you can do so from the Build & Development Settings section." So Vercel did automatically make a build folder for you. This is ok, because you should always use npm run build to create your build folder and point your hosting to use this folder for production.

Problems when bringing node with angular OR how to create a mean app without using angular-cli

I am using angular4. I used angular-cli to create my project.
I want to use node.js as server side language with mongodb. So, I found a tutorial here to connect node.js with angular.
But there are two problems with it:
dist folder is created.
auto refresh server like using nodemon or similar is lost
problem with dist folder
My site depends heavily on images. I keep all the images in a folder called images which is located under assets folder created by angular-cli
So, when I run the server, all the assets will be copied to the dist directory, which will take time and (more important) space on the webserver. Another problem is that If I upload new images, then it will be copied to the images folder inside dist folder, so I have to manually copy those images to my original dist folder.
Another copy of images folder in dist folder will take double space than my original app. So, I have to pay more money for hosting to use more space.
problem with auto-refresh server
before using node, I just typed this command
ng serve
and my application started. Then when I change any code and save the file, the changes were reflected in the browser without restarting the server.
But when I started to use node, I have to manually restart the server whenever I make changes to my code.
Question:
Is there any way that prevents app to create images folder inside dist folder to save space. I mean can I use original Images folder instead of creating one inside dist?
Or is there any other way that a node application and angular application work together?
If anybody knows a solution that does not use dist folder, then I would love to use that solution. As my need is satisfied. Auto-refresh server is not important to me in this case.
So, if anybody knows a way of how to create a mean app without angular-cli,
then I think that is very near to my solution.
You can change dist folder's name to any name you want. you just need to find file .angular-cli.json in your main root folder and change json
"apps": [
{
...,
"outDir": "dist", // dist to any name e.g. public, ...
...
}
]

Deploy React/Webpack static directory on different server from index.html

I'd like to deploy a React app built with create-react-app within my company's CMS. I can't host assets on the CMS, just the script tag, css tag and root DIV. I've deployed the static assets to S3 and pointed my publicPath to AWS, but in my CSS the components are not rendered. I'm new to webpack configuration and unsure where to turn.
There are only two ways where to build assets for deploy:
build assets on local machine and deploy static files
deploy sources to server and perform assets building there
There are some differences. For example first way may require more data to transfer, and second way requires more complicated configuration on server. Server must have possibility to execute different tools including webpack and have enough place for node modules.

Categories

Resources