i use nextjs in vscode and every time i build my app with
npm run build
the buildId and old build path are saved in .vscode-server/data/user/history I want to disable this because for some reason my nextjs app uses that old info sometimes and changes my new build on itself what results in a 404 error for the buildManifest.js file. This is because it uses the old folder name but the folder has a different name (generated with npm run build). I do this with SSH to my raspberry pi. Let me know! Thanks.
I want to publish my Svelte web app to GitHub pages and based my application on the template https://github.com/sveltejs/template. When I run npm run build, public/build/bundle.js is created but no index.html. All the tutorials I found talk about how to deploy Sapper projects, or to use external tools like Vercel and Surge, but is it possible to just build Svelte without any external tools? All I want is a static HTML page that I can copy to GitHub pages.
Edit: See the accepted answer for the general approach, however for non-root-directory-deployment, you still need to make the paths relative. I created a pull request at https://github.com/sveltejs/template/pull/239.
In svelte, index.html is a static file which will import your bundle.js and run it.
index.html is located at /public/index.html while your bundle.js is located at /public/build/bundle.js
in svelte template, index.html imports /build/bundle.js using a script tag to initialize the application.
while deploying, you just need to upload the whole /public folder and everything should be operational.
I am deploying a NODE JS app to an Azure App Service using Azure Devops pipelines, but it failes with the following error
##[error]Error: Failed to generate web.config. Error: ENOENT: no such file or directory, open 'D:\a\_temp\temp_web_package_09902550774824137\web.config'
But in my deploy step I have the generate web.config step so I am not sure why its not working?
Thanks for asking question! You may try below steps for troubleshooting the issue.
Check that the application is listening on the port provided by the PORT environment variable: process.env.PORT. You may use the WEBSITES_PORT app setting set to port.
Also,review the web.config and make sure the name of the main script file in the handlers section matches the main script file and the Web.config configuration for settings names/values.
Check that the nodeProcessCommandLine setting to ensure that the Node.exe is available at the correction location.
Also, In order for Kudu to detect a Node.js app, you need a package.json file and an app.js/index.js in the root of your folder. It's recommended to correctly set the start script in the package.json file https://docs.npmjs.com/misc/scripts#default-values
If the deployment steps run correctly, however, the app fails to start due to a missing npm package, note that only "dependencies" are installed, "devDependencies" are not installed by default.Try viewing the logs to fetch more details.
I am making a new Web application with Flutter web.
I want to add service workers to my app in order to make it a PWA.
What I need to use to achieve my goal ?
I have tried to do it with dart packages (service_worker or pwa), but they are deprecated for Dart 2.
Since a service worker is just javascript code you can write one in plain javascript (e.g. in a sw.js file), bundle it with your flutter web app and then register the service worker from the index.html file like this (source):
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
You currently need to switch to Flutter Channel Dev (at Feb 17th 2020, current Dev version 1.15.3)
For existing projects, use the terminal to hit the command:
flutter create .
For new projects, you would have a 2 files: manifest.json and index.html inside your web folder.
While checking index.html you would notice the following script:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/flutter_service_worker.js');
});
}
If the script is not there, added inside <body></body>
This script creates the PWA support for you and be able to "install" the app on a device (this also includes MacOS)
Follow this GUIDE to complete your PWA functionalities.
This semester, I began learning Vue. Our first "assignment" for the Vue phase was to follow along with, and complete, the instruction provided by a YouTube video from Traversy Media. This video was great to follow, evident that I was able to complete its objective with little difficulty. However, I don't feel that I quite understand the relevance of each file within a Vue project, such as index.js, index.html, *.vue.
I've found a few videos which create a component and then utilize that component. However, I feel completely lost when downloading a component, specifically: 'Vue-Accordion' from github to use as my navigation in conjunction with vue-router. The vue-accordion instructions simply state to add specific code, but doesn't say to which file I should add this code.
I've hacked at it by guessing/assuming a file that I figured relevant to the task, such as app.vue, index.js, and index.html... to no avail. Certainly, I think that a better understanding of a Vue Project's file-structure/hierarchy could give me a better feel in knowing exactly what files are relevant to any task-at-hand that I may have.
Alright so schools in session (sorry if I explain too basic stuff at times, just trying to be thorough).
Here's the basic structure for a Vue project using vue init webpack-simple my-project:
src/
assets/
logo.png
App.vue
main.js
.babelrc
.gitignore
index.html
package.json
README.md
webpack.config.js
The src folder contains all the source files of your project.
The src/assets folder contains all your assets, primarily images.
App.vue is the first "view" of your app.
main.js is the main script of your project where you configure and run Vue. This is where you load anything that should exist in the global scope of your app.
.babelrc configures how the babel tool should syntax check your code.
.gitignore tells Git to ignore certain files from committing.
index.html is the page that's sent to the clients browser. This is where we load the main.js file and put any and all meta data you need (unless you use e.g. vue-meta to handle it there instead). Note that <div id="app"> html tag, this is where all your Vue files get mounted to.
package.json is our npm configuration file. When you run e.g. npm install --save component-from-npm-name it's saved here so you can just run npm install later to get all the dependencies of your project.
README.md is a documentation file in the Markdown language format. It's displayed as the frontpage of your project on e.g. Github or Gitlab.
webpack.config.js is a Node.js file that is responsible for running Webpack on your project. Vue can be used without Webpack but I don't recommend it. You can run node webpack.config.js directly to build your project. This file is your build script, you configured this to handle the build process of your project.
So, armed with this information, lets get to your question.
How do you load a component in Vue.js?
Run npm install --save vue-accordion (note that while the source code is hosted on Github, the package is downloaded from here: https://www.npmjs.com/package/vue-accordion)
In your index.js file, which is responsible for loading things to your Vue app in the global context, you do as the Github page tells you and first import {vueAccordion} from 'vue-accordion', then run Vue.component('vue-accordion', vueAccordion) to register it in the global context.
That's all there is to it. index.jsis your entry point for your Vue app, while webpack.config.js is your build script.
There is however an alternative solution to loading components. In the previous variant we loaded it in index.js to load it in the global context, i.e. you can use the component now anywhere in your app, but what if you only want to load it on an as-is-needed basis (you'd wanna do this for performance reasons)?
Well, in your App.vue file you have a <script> tag where you can configure things in just that Vue component (all .vue files are Vue components, even if you call them routes, pages, views or whatever to indicated their purpose). In order to load a component not in the global context, but the component context, you'd do the following in App.vue:
<script>
import Accordion from 'vue-accordion';
export default {
components: {
'vue-accordion': Accordion
}
</script>
Tips...
This is just one setup for a Vue project. A Vue project can be as simple as just loading Vue as a script to your static index.html file, then you can have a much more annoying setup with regular javascript files, but that's dumb and inefficient. So, a proper project has a Node.js file to run Webpack. Depending on how you configure Webpack your project can act quite differently from any other Webpack project.
Read up more on how Webpack works so you can have a project structure that makes sense for you.
Take a look at Nuxt, it's essentially a collection of other projects (primarily Vue and Webpack) that simplifies the making of a powerful Vue project. You can sit and set up your own Vue project and all the tools yourself and get the same result, but Nuxt makes it simpler for you to do.
To install a specific GitHub repository as a node dependency.
Actually, it doesn't matter if it is a dependency for Vue or React
it is related to setting in the package.json dependency from a GitHub source.
You need to modify your package.json file. In the dependencies section, add the package name as the property name and, as a value, the username of the repository in GitHub and the repository directory.
e.g
"dependencies": {
"#zeratulmdq/vue-accordion": "zeratulmdq/vue-accordion"
}
and then to import the component
import VueAccordion "#zeratulmdq/vue-accordion"
It is not related to your desired repository, but just in case the selected repository package.json file does not point to the correct main property, it will not load the component, so you will need to point to the specific component file to import, e.g:
import VueAccordion "#zeratulmdq/vue-accordion/src/index.js"
or
import VueAccordion "#zeratulmdq/vue-accordion/src/App.vue"