I am just starting to get into SvelteKit and have a question regarding development and builds.
I am using the static adapter and I would like to have two entry points for my SvelteKit app.
One being the default index.html (src/app.html) and the other being other.html (other/app.html).
eg.
build
...
index.html
other.html
src
...
app.html
other
...
app.html
Is there a way using Vite or SvelteKit to have these two separate entries in the one build configuration?
Related
I'm running a MEAN stack webapp on Heroku. I have two folders at root level, "frontend" and "backend". Each folder has their own package.json. I have built the Angular app and put it in the "backend/public" folder. I can serve the Angular app from Express and deploy it to Heroku, no problem.
And here is my doubt: the Angular code in the frontend folder has its own dependencies, but when I build the app, run it on Express, or deploy it to Heroku, is it still using those dependencies from the node_modules folder in the frontend folder? Or are these dependencies somehow injected into the built Angular app's minimized code sent to the backend/public folder, for example?
I'm having trouble finding any info on this specific doubt.
I am using node 10.16.0 and vue 2.6.11 and I want to have a config.js file in the node root folder, pointing to a folder that is outside the node structure
hello
hi.txt
node-project //node project
server.js
config.js
public //contains build vue
vue-project //contains not build vue
config.js should contain something like
let txtFile= '../hello/hi.txt';
exports.txtFile = txtFile;
I want to be able to keep the config.js file in node, not blended in vue, but have build vue (inside public folder) also able to read it
Ideally I would like to read config.js from vue-project and when I do npm run build , I can also read config.js from public (where I put the builded vue project)
Here is my failed, over-complicated attempt
Since everything you put in the public folder of a vue project it gets passed to the build, and the path changes automatically during build, I did this
hello
hi.txt
node-project //node project
server.js
vue-project //contains not build vue
public
configs
config.js //contains ../../../../hello/hi.txt
src
views
Home.vue //imports configs/config.js
and when I did npm run build the above becomes
hello
hi.txt
node-project //node project
server.js
public //contains build vue
css
js
fonts
configs
config.js
index.html
So the config.js automatically transfered to the build vue, the path to config.js is automatically changed and the config.js is in the node, easily accessible, only one sub-folder away, not blended in the vue js.
The problem is that now config.js changed position, so I have to manually change its content to
let txtFile= '../../hello/hi.txt';
I thought that its alright, small price to pay, its just a single manual change.
But the problem is that Vue does not read the changed value. Its still reads ../../../../hello/hi.txt and not '../../hello/hi.txt . Restarting node does not help. I guess vue caches the value?
Please advice. I hope my example helped you understand what I want to do. Feel free to ask me anything that will help you clarify
Thanks
I would like to deploy my angular application with nodejs, mongo, express js on my own server.
My way is:
-> ng build --prod (output is dist folder)
-> ng serve on dist folder
Start backend:
-> node server js file
But I think, it is not correct way od production stage. Added http server on express, there I create another index html view file with hbs, and there I use:
<body>
<my-app>Loading ...</my-app>
<script src="/dist/bundle.js"></script>
</body>
But on dist server, there is multiple js files.
How can I create using ng option (no webpack or must be f.e. webpack?) my angular/mongo/node/express application (in 1, my own server, no aws, heroku, github etc). There is any correct way to do it?
I've been able to deploy an angular app using Caddy Server as the webserver.
Create a build of your Angular code by doing ng build --prod-true.
This creates a set of bundled Js and Html files in the dist
directory.
Copy these files to where you want to run the app.
Next go to the Caddy website and download the version of Caddy for
your os. You can choose all kinds of features but for my deployment
inside a firewall a plain build worked fine.
Drop the caddy file in the directory that you put your compiled
angular code.
Create a caddyfile (just a file named caddyfile), add localhost:(your
favorite port number).
Run caddy and it will automatically serve your app by launching
index.html. You can view your app at localhost:port.
No messy node installation. Caddy has all sorts of add-ons to deal with more complicated scenarios but the deployment is caddy.exe, caddyfile and your built code.
I want to host my app outside of node JS, but I want to use .vue files and possible npm as build system (if it's needed). Is it's possible to do?
I do not need any backward compatibility and if it work on latest Chrome dev it's ok for me.
Is there any examples how it can be done?
I tried to build some webpack template, but it's work only inside NodeJS. On other server I am getting 404 when I am accessing to URLs that placed in .vue files. It's seems that they can't be handled by the other server.
VueJS app is not NodeJS app.
VueJS app is interpreted by the browser.
You just have to build your app on computer and host files as any static website, so any server can serve html and files.
To build your app use e.g. Webpack (https://github.com/vuejs-templates/webpack )
NodeJs only use to build *.js files in front-end, your WebApp dosen't have to run on Nodejs.
1, You can create a index.html file that requires *.js file when webpack built it.
2, Use Chrome to open your index.html file so you can see it works.
You don't need to use vue-cli or other servers if you only want a static page.
But you have to know how to set your webpack.config.js, you can look that doc https://webpack.js.org/guides/getting-started/
Your starting point is wrong. Vue + node.js can build a complete site. Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.
In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.
Vue-cli
If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!
Vue Demo
Best way to develop Vue app is run dev server, and after all just build static assets. You don't need use vuex files, even better is use static template because you can easily integrate it with some back-end (WordPress or whatever).
Helpfully will be use some starter, for ex. Vue.js starter
It's true that vue will create static html pages when you run the build script. However, you will need to serve the files from a small server for the site to work. If you notice, when you run npm run build, the terminal will print a notice...
Tip:
Built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
You can create a simple http server in your /dist directory with express and then host your site somewhere like Heroku.
Take a look at this article https://medium.com/#sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.4nbg2ssy0
TLDR;
write a super simple express server
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
add a postinstall script in a package.json within /dist
{
"name": "myApp",
"version": "1.0.0",
"description": "awesome stuff",
"author": "me oh my",
"private": true,
"scripts": {
"postinstall": "npm install express"
}
}
push only your /dist folder to heroku after you've compiled your site.
proof: I've followed these steps to host my vue.js project
using vue files without NodeJS (nor webpack) is possible with vue3-sfc-loader.
vue3-sfc-loader
Vue3/Vue2 Single File Component loader. Load .vue files dynamically at runtime from your html/js. No node.js
environment, no (webpack) build step needed.
vue3-sfc-loader will parse your .vue file at runtime and create a ready-to-use Vue component.
disclamer: author here
Could you try something as simple as an S3 bucket setup for web serving? How big is your project? How much traffic do you think you'll get? If it's very small, you may be able to host on S3 and use webpack, etc.
I have a Sails.JS application with Angular.JS front-end.
The angular files are stored in /assets/linker and they are injected properly on start. My issue is that when I change css or js file from assets the change doesn't appear on the server, the loaded js file is the same as when the server started. I tried to clear my browser cache and tried in another browser, but still the same.
I also tried to run the application with forever -w and nodemon, but still nothing. The application is in dev mode, anyway starting with sails lift --dev does not solve the issue neither.
I have feeling that I miss something in configuration. Is there any way to force reloading of assets?
You need to check your Gruntfile configuration. It's where the magic happen in term of linker and livereload.
Specifically, you'll need to look at the watch task and the related tasks.
By default it looks like this :
watch: {
api: {
// API files to watch:
files: ['api/**/*']
},
assets: {
// Assets to watch:
files: ['assets/**/*'],
// When assets are changed:
tasks: ['compileAssets', 'linkAssets']
}
}
I found the problem. I made the Angular.js structure with angular generator
which adds not only the js structure, but also karma test environment containing shell and bat scripts, karma framework and more.
Building sails application with all these files in watched folder is breaking the refresh functionality. There's no errors in console and nothing in the running application, but the files from assets are not reloaded anymore.
Tip of the day: be careful with the files you have in assets and take a look what does generators generate!
I came here looking for livereload, after a little search
Live Reloading
Enabling Live Reload in Your HTML
in current version of Sails v0.10 there is a file for watch task: tasks/config/watch.js