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.
Related
I have a working Directus CMS environment and would like to include some custom pages in there as well. According to the documentation!, I "can build page modules for custom dashboards, reporting, point-of-sale systems, or anything else".
The CMS is downloaded from directus, installed in localhost and then moved with FTP to the server as my client doesn't have terminal access allowed.
I already tried the boilerplate from https://github.com/directus/extension-toolkit, created a vue page with it, ran npm to transpile it, but now I don't know where to put it. If I put it to public > extensions > custom > pages (I put here the whole created folder), it's not shown anywhere and I can't really find any tutorial or help on how to do it. Not even in the docs.
You have to copy only the dist subdirectory of the extension to your server.
Example:
directus-extensions create page orders
directus-extensions build
rsync ./dist/ root#example.com:/var/www/directus/public/extensions/custom/pages/orders/
You should now see your page extension listed in the sidebar when you log in to your Directus app (provided your user role is configured to display extensions in the sidebar).
I run NPM build on the PWA boilerplate I am using.
Folder structure on server is as follows:
my-project ->
static,
index.html,
service-worker
I have then hosted on server and the Manifest and assets are returning a 404.
The project is currently here.
https://evilernie44.github.io/my-project/
Any help is much appreciated.
Changing routes on the manifest and two different servers
I want to get a boiler-plate hosted as a starting point for my PWA
Your script tags point to the wrong path.
Take this tag for example:
<script type=text/javascript src=/static/js/app.98f21a65b373eaa50022.js></script>
The browser resolves it to https://evilernie44.github.io/static/js/app.98f21a65b373eaa50022.js, which does not exist.
The correct path should be ./static/js/app.98f21a65b373eaa50022.js. The extra dot instructs the browser to build the full url relative to the current path.
Alternatively, you can specify an absolute path, such as /my-project/static/js/app.98f21a65b373eaa50022.js which points to the correct location.
In conclusion, any of the following 2 script tags would work:
<script type=text/javascript src=./static/js/app.98f21a65b373eaa50022.js></script>
<script type=text/javascript src=/my-project/static/js/app.98f21a65b373eaa50022.js></script>
By default Vue CLI assumes you are running the application as root, so it will try to load the files from '/'.
When deploying to production, or in a subfolder, you need to set the publicPath in vue.config.js
https://cli.vuejs.org/config/#publicpath
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"
I'm trying to learn Vue.js as well so I create a simple folder called VueTest.
I have two files in the folder:
app.js
index.html
I found the info on how to configure the task runner to open up the current file and I have that setup to open in Chrome, which it does. However, because it's not running as a project, my index.html doesn't see the app.js file and so my Vue project is not working correctly. I just runs the HTML code an all I see is my mustache code (ex: {{Title}}).
How do I run files as a project?
If get it correct - you want to launch js app without opening teminals outside 'VS Code' then you have to see this
Have fun
I found my mistake, it's actually easy and I should have figured this out before posting.
To run Index.html on it's own, all I had to do was make a script reference in the page pointing to the app.js file. I didn't have to do that in JsFiddle.
you can't run files as a project in VS Code. it is just a text editor.
I just put the build folder to the root folder of nginx server, e.g. /var/www/html, but nothing is visible.
When inspect from browser, the root content is empty?
enter image description here
Check your developer console for possible errors. You can also use React Developer Tools to debug your app. You can provide your non-sensitive code to make us understand it better.