I have VueJS project published on Netlify, what i want to do is to make modifications to this project and see my changes locally before i update the repo on GitHub and publish the changes on Netlify. So simply i'm trying to find a way to serve the project locally but this doesn't work anymore after the project got published on Netlify.
Whenever i run npm run serve i get the below error:
PS F:\Projects\reaction-timer-testing> npm run serve
> reaction-timer-testing#0.1.0 serve
> vue-cli-service serve
'vue-cli-service' is not recognized as an internal or external command,
operable program or batch file.
I assume this is because that project is in build mode and i did that by running npm run build while i was publishing it to Netlify.
I've read someone recommends to run serve -s dist and this got me no where because each time i visit the local link http://localhost:3000 it gets 404: the requested path could not be found.
Another one advised to download and install xampp but i don't know what to do next i think i've tried everything.
Here is a view of my project files (it's a very simple project that i made for learning)
Pic of project files
Link to the project on Netlify: https://reaction-timer-testing.netlify.app/
Related
I'm new to vueJs and nuxt and i'm trying to deploy my nuxt app to my server, I tried the command npm run build and I have two files, client and server, I googled what should I do with this files but I got Nothing, So how to deploy my app to cpanel?
If your target is server (default), you indeed need to do npm run build. Then, you have a generated dist that you need to send to the server and then npm run start.
Sometimes, additional configuration is required and can be found in the deployment pages. There is no Cpanel but you maybe can find something that looks like the same here: https://nuxtjs.org/docs/2.x/deployment/deploying-to-21yunbox
I have a simple vuejs project, which does not need to communicate with server. I need to pass this project to someone does not know software engineering, so I cannot have him install nodejs and run npm run dev to run this project. Is there any way to compile this project to a single html file, so he can just open this file in chrome and run it?
If you just want to show him the project (and don't let him edit it), the obvious solution is to create a build (running npm run build), put it on a test server and give him the domain name. Another possibility is to send him (e.g. via mail, zipped) the content of the dist folder after a build (the index.html and the static folder).
Is there a good and easy to understand tutorial on hosting vue.js SPA application. I have currently uploaded the complete project to the server through Filezilla. And I hadn't run npm run build prior to hosting the system. Can I run npm run build locally and then upload the dist folder to the already hosted application. Any help will be much appreciated. Thanks
Yes, just run npm run build on the client and then upload the dist folder to the server. That's the normal use case, there's usually no reason to move the whole project with all the dependencies to the server.
You should run npm run build next upload files from folder dist to server. In dist folder there will be all files which are required to SPA correct working.
I cloned universal-starter (webpack version) and have it up and running on my local machine using npm start and npm run watch per the instructions
Now stuck after npm run build and attempting to deploy to Azure (and Google Cloud) via the github integration - can't figure out how to set up either to work.
Anyone have a recipe on how to get the webpack bundled files to fire up on an external host with express.js? Do I need to run commands via a CI integration? The files in /dist don't seem to stand on their own.
At Netlify you can connect your git repo and tell them what build commands you want them to use. If you specify the "dist" directory, then they will deploy anything that gets in there (after they have compiled your application).
Edit: the lowest tier is free.
Edit2: I am not associated with Netlify. I just used them in my latest deploy, and found the process extremely easy.
Note: This has changed dramatically since Angular 2. While I'm now moved on to SSR, docker, and all kinds of other things, the simplest answer was to
1) Production build
ng build --prod
2) Transfer files to a static web host (i.e., I used awscli to connect to a s3 bucket when it was just a static site...I know use SSR so I need to use a node server like express)
3) Serve files (there are some complexities for redirect requirements for index.html for error and for 404...and of course setting the status for both redirects to 200)
4) Put something on the frontend for performance/ ssl/ etc. nginx or a CDN would make sense.
I read about npm and bower, differences, usage, how it works, purpose as well. All explanation says that to work in NodeJs. But when I searched for AngularJS2, the tutorial says use npm. I have some basic questions based upon the understanding that npm basically for dependency management or packages to be installed.
How my Java/Eclipse workspace knows that npm installed the particular JS library/file, what path should be given in the html/web page for including those files/libraries?
If I move the web application to production, how will the server gets those dependent libraries? Even if server gets it, it might be installed in different folder. Basically how it can be managed with a web applications in different environments for just AngularJS app?
Can anyone please help me to have better understanding?
Finally found the answer. NPM is node package manager which helps basically to download the dependencies (almost like maven, gradle in java).
npm software needs to be installed in developer's machine.
Add the required dependencies in the package.json in the root folder of AngularJS application.
Open the DOS command line and navigate to project root folder(workspace/project in eclipse), then type npm install which will download all the dependencies mentioned in the package.json to a folder called npm_modules inside project folder.
The other and important advantage is npm can be used to install browser agent as well. So npm start command will open the browser and will load the application automatically in browser. Developer does not need to be aware about NodeJs. One more benefit of using this approach is the browser will get refreshed automatically when any update in the JS file gets saved.