I have created a vueJS website and I have used the history mode for routing in order to get rid of the # in the URL which shows in the default has mode routing. However when I deploy my project to the server after
npm run build
it runs fine but when I reload any page or type the url in the browser manual i get a 404 error instead.
I have used the history mode for routing. I am using firebase for the backend. I read the documentation on how to fix this however I did not quite understand it.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode : 'history',
routes : [
{
path : '/',
name : 'dashboard',
component : 'Dahsboard',
}
]
})
I don't have enough reputation to answer in the comment section under your question, so i provide an answer here.
You can find the code that tells the web server to serve the index.html file for every routing request here. Just create a .htaccess file and upload it to your server.
In your example above you also need to import your Dahsboard-Component if you are using single file components.
Related
I'm trying to learn how to deploy a Stencil web app using a web server like Ngnix but I can't make it work on localhost. I suspect there is no entry point for the minified build.
As an example, I'm using the stencil starter app.
In my stencil.config.ts file, I have opted-in for the "dist" output target.
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null,
baseUrl: 'https://myapp.local/',
},
{
type: 'dist'
},
]
For the minified build I am running the command:
npm run build -production
The generated "/dist" folder does not contain an index.html file and this prevents me from being able to serve it using Ngnix.
The contents of the dist folder
I would expect that the generated "/dist" folder would contain an "index.html" file that could be served as an entry point to a web server.
What am I doing wrong?
Is there anything I'm missing?
The dist output target is meant for including in existing pages.
To generate a website you can use the www output target (in the www folder). This will also give you access to website-specific options, like a service worker.
The docs state:
The www output target type is oriented for webapps and websites, hosted from an http server, which can benefit from prerendering and service workers, such as this very site you're reading.
For anyone who comes across this in the future, I found the solution.
I was supposed to use the "/www" folder for deployment as that's the way it's supposed to work for standalone web apps, and it contains an "index.html" file.
Here is the documentation
I'm trying to add push notifications to my svelte site using Firebase/Google Cloud Messaging (FCM), and a service worker JS file needs to exist at the absolute path: https://example.com/firebase-messaging-sw.js . However, Vitejs is bundling this with the other svelte/js code in my project. I can manually place the file there, but then it won't be transpiled. Aka these imports here won't work in the file:
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";
So how do I tell Vite not to bundle this file and have it output at the root dir?
Alternatively, I saw there might be a way to pass a service worker differently, if that removes the need for the js file please let me know roughly how it's done.
Thank you.
So the url for my angular web app is https://devnet/appName/ and when I click a button I want it to go to http://devnet.some.org/appName/page.aspx. now here's the part I need help with, the angular web app is on devnet, testnet and (you guess it) prodnet. depending upon which server the angular app is running from is where I want it to go and find the old app.
https://devnet/appName/route ->
http://devnet.some.org/appName/page.aspx
https://testnet/appName/route ->
http://testnet.some.org/appName/page.aspx
https://prodnet/appName/route ->
http://prodnet.some.org/appName/page.aspx
Notice the change in protocol, the servers are the same as is the appName, but the route and page.aspx will be different.
And yes this is a temporary thing until the angular app is completely complete
The best approach from my POV is to use environments, e.g.:
environment.ts // current one
environment.dev.ts
environment.test.ts
environment.prod.ts
Add corresponding configurations in angular.json (propagate "production" configuration).
Add oldUrl to the environment interface and provide different values for each particular environment.
Import environment to the component where you the redirect button is used and use environment.oldUrl property to construct a proper redirect URL.
I recently used Google's Firebase to deploy my application. But somehow something is going wrong. Please access the below link to view the exact error trace.
In my build, everything looks normal all the CSS files and JS files have the appropriate code but after the deployment all the Files have HTML, go through the Below URL and watch the console to have a better idea of the error.
https://workout-wfh.web.app/
View both Images to view the difference :
1. In the deployed application
In my local build
If you view the source of the deployed website, you'll see that the <script> tag is trying to load this URL:
https://workout-wfh.web.app/MohanVarma1965/workout.git/static/js/main.5cca3537.chunk.js
which doesn't exist and so is falling back to your default HTML content. It looks like your build process is generating absolute URLs that include your username and directory path. You should adjust your build tooling to leave out everything before /js.
My application is running on Sinatra and deployed on my Apache web server using Passenger. My directory structure is as follows:
approot
` public
` css
- bootstrap.css
` uploads
- empty.txt
` tmp
- restart.txt
` views
- success.haml
- upload.haml
- config.ru
- myapp.rb
Inside upload.haml
%link(rel="stylesheet" href="css/bootstrap.css")
When I run this application on localhost:4567, the CSS loads just fine. However, when I deploy it on my web server, the CSS doesn't load.
On my web server, the application is accessed using: rubyapps.mydomain.com/appname
And if I type: rubyapps.mydomain.com/appname/css/bootstrap.css, I am able to see the contents of my CSS file just fine.
Totally confused, and not getting how Sinatra handles this situation, looking for a little help.
You might be running into the need to use Sinatra's URL helper.
For generating URLs you should use the url helper method, for instance, in Haml:
%a{:href => url('/foo')} foo
It takes reverse proxies and Rack routers into account, if present.
This method is also aliased to to (see below for an example).
Maybe this?
%link(rel="stylesheet" href="../public/css/bootstrap.css")
Or...
%link(rel="stylesheet" href="/css/bootstrap.css")