My vue.config.js code is as below
module.exports = {
baseUrl: process.env.NODE_ENV === 'production' ? '/prodserver1/' : ''
}
and it's working perfectly fine by hitting URL: abc.com/prodserver1/index.html (hostname + pathname)
But I have multiple production servers where I wanted to deploy the same application, let's say, I have one more production server named 'prodserver2'
How to pass multiple production server strings in base URL such that I can run app either on abc.com/prodserver1/index.html or abc.com/prodserver2/index.html?
Maintaining multiple applications for each server is not feasible as every minor change needs to updated in each time to each app.
The simple answer is no. You can't supply a path to a file or resource which references multiple possible locations. However using a relative path instead should work.
From the vue documentation baseUrl it first of all suggests to use publicpath instead. In the publicPath description :
The value can also be set to an empty string ('') or a relative path
(./) so that all assets are linked using relative paths. This allows
the built bundle to be deployed under any public path, or used in a
file system based environment like a Cordova hybrid app.
I suggest you use the option of a relative path, so you can then serve your app from any path.
Related
My project with Nuxt JS is set with target:static and ssr: false.
This app need to connect to a local endpoint to retrieve some informations.
I have multiple endpoints and I need multiple instances of the app, every app must read only his endpoint.
The question is: how change the endpoint address for every app without rebuild everyone?
I tried with env file or a json file in the static folder (in order to have access to this file in the dist folder after the build process).
But if I modify the content of the env/json file in the dist folder and then reload the webpage (or also restart the web server that serve the dist folder), the app continue to use the original endpoint provided at the build time.
There is a way or I have to switch to server side rendering mode (which I would rather not use)?
Thank you!
When you use SSG, it will bundle your app at build time. Last time I checked, there was no hack regarding that. (I don't have the Github issue under my hand but it's a popular one)
And at the same time, I don't really see how it would be done since you want to mix something static and dynamic at the same time.
SSR is the only way here.
Otherwise, you may have some other logic to generate dynamic markup when updating your endpoints (not related to Nuxt) by fetching a remote endpoint I guess.
With the module nuxt content it's possible to create a folder "/content" in project directory and read json files from that directory.
After, when creating the dist with nuxt generate command, the "content" folder it's included in "_nuxt" folder of the dist and if you modify the content of the json file and refresh the webpage that read it, will take the new values.
We have build nuxt js multi tenancy web site. Now we want to fetch environment variable by domain for ex. We have 5 domain as below.
Note: We have used same source code for all domain.
test1.com
test2.com
test3.com
test4.com
test5.com
So for this if i open test2.com then it should consider my test2.env or if i open test5.com then it should consider test5.com.
But the main problem is we have dynamic web side so any user will create his own website from our platform. So how can we create dynamic env file for web site and how to access that dynamically created env file
You should not try to reach a specific file but configure your environment to serve the proper variables. Either in a static way or dynamically.
Otherwise, if you really need to specify a new directory or filename, you can use this solution when launching your app.
yarn dev --dotenv variables/.env_file
I've to read the query parameters from an URL in my Gridsome app
. I have 2 cases of URL, in one of which my query key is coming empty object {} when accessing using this.$route.query in my app.
case 1: https://app.com/forms/ads/?param1=one¶m2=two - There is a / slash just before query params starts.
case 2: https://app.com/forms/ads?param1=one¶m2=two - No / slash just before query params.
When I'm access this.$route.query on my localhost both of these cases giving me the value of param1 and param2.
My problem is when I'm pushing it to production, case 2 is returning an empty object {}.
storeUtmData() {
const utmSource = this.$route.query.utm_source;
const utmMedium = this.$route.query.utm_medium;
console.log(this.$route.query); // return {}
...
},
case1 is requesting in an "index.html" in the folder "https://app.com/forms/ads/" while for case2 no resource will exist on static served webpage when you have build your project with gridsome for production (if you don't have any really special infrastructure).
As the resource doesn't exist my guess is that vue-router which you access with "this.$route" contains only an empty object with this case2.
Why does it work locally ?
I can imagine locally in the dev environment express treats the resource "ads" as a route while on live there is only a folder containing and index.html which is served by a webserver.
The difference between a route and a folder which is served statically by a webserver is that a route from an nodejs express application is actually triggering directly application logic to be executed, while the webserver is mainly transferring the static files in the folder. By convention a folder is accessed with a slash at the end in a URL.
For further information please read the following sections:
https://en.wikipedia.org/wiki/Clean_URL#Structure
https://en.wikipedia.org/wiki/Clean_URL#Implementation
I hope that answers your question.
Why do you need case2 to work in production ?
It should be under your control how to link to certain URL at least within your application.
Cheers,
ewatch
I'm having trouble setting up a development workflow that will do both of the following tasks simultaneously:
Recompile static assets (js, css) on file change. Serve these static assets. Notify the browser that the page must reload whenever assets are changed. Use react-hot-loader.
Use express to run a server which serves an API which the static assets will "consume". Have this express server restart any time my server files change.
Is the best practice to have webpack-dev-server serve the static assets, and have a separate web server serve the API on a different port? If so, the API calls in the javascript will need to specify the host and port, and will need to be changed before going to production. It seems all the tutorials online focus on #1, and don't set up an API server. Can anyone point me in the correct direction?
I'm not opposed to using gulp and browserify or SystemJS instead of webpack, but it seems that if I want to use react-hot-loader, I need to use webpack.
You can do something like this:
Create an express() proxy
Create a webpack-dev-server
Link the assets with absolute url
Start both servers.
Note: Make sure to have different ports to run both the servers.
var proxy = require('proxy-middleware');
var express = require('express');
var url = require('url');
//----------------- Web Proxy--------------------
var app = express();
app.use('/assets', proxy(url.parse('http://localhost:8000/dist/assets')));
app.get('/api/url', function(req, res) {}
app.post('/api/url', function(req, res) {}
// ---------------Webpack-dev-server---------------------
var server = new WebpackDevServer(webpack(config), config.devServer);
// ---------------Run both servers-----------------------
server.listen(config.port, 'localhost', function(err) {});
app.listen(8080);
We have been using gulp+webpack for the last year and it has been great. We have an API Gateway which only serves up one static html file(the index.html) and everything else is just REST end points. Then in the index.html we reference a css file or two and a couple scripts that load from our CDN(Cloudfront).
If you run that way in production, your local setup just needs to use the webpack dev server as your "local CDN". You are correct, your javascript will need to know what the api url is since that will change local vs production. We actually have local, dev, stage, and production - once you have it setup to work in 2 environments its not hard to add more(which is good!)
Now our index.html has some template variables that get filled in by the API Gateway when it serves it up. Similar to this:
<script>
var siteConfig = {
apiBase: '<%=apiBaseUri%>',
cdnBase: '<%=cdnBaseUri%>'
};
</script>
<script src="<%=cdnBaseUri%>/assets/js/bundle.min.js"></script>
Then you just pull in siteConfig when your react app is starting up and prepend those variables to any api/cdn calls. Swap the variables depending on your environment, and bam, you're done!
A slightly simpler approach is instead of filling in those vars when the page is served up you could do it at build time. Thats how we started but as things evolved it turned out easier to manage at run time.
BTW, I am pretty sure you can accomplish all of this using just webpack - gulp probably isn't necessary but it was easier for us at the time to use gulp for running unit tests, linting, etc.
I have script(called from flex app through HTTPService) and the flex app residing on the server. Now I have to run it on several servers. Server on which i run it, will contain the flex app and the script called by flex through HTTP service. The problem is in this case i'll have make changes in HTTService URL and build the flex app, each time i run it on different server. Is there a way to specify the URL in some file from which the flx app could read the URL. So each time we run it on diff server we need not to build the flex app, and can just make changes in the file from where the flex app constructs URl dynamically.
Any pointers in this directional will be great help
Thanks
Sandy
Assuming your folder structure will not change you can use the LocalConnection object
var lc:LocalConnection = new LocalConnection();
trace('lc.domain ' + lc.domain )
This will give you the domain name the server is on then you can hard code the folder structure for the rest of the URL
If you need the full url to the page that the swf is loaded in you could use the externalInterface and call a function that returns "window.location.href" or something like that I have not tested it.
But come to think about it why are you not using relative URLs.
Absolute anything = bad