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
Related
I'm building a Kotlin console app that's going to be installed in one of my customer servers. The app downloads some data from a REST API. Before pulling the data the app needs to obtain a token by issuing a login request using a username and password.
I'm gonna be packaging the app using The Badass Runtime Plugin with the runtime parameter, which basically creates a folder including my jar, dependencies and a bunch of scripts.
To avoid hard coding the password in the application code I came with the following approach:
I'm going to store the password in an application.properties file and pass the file path to it using an environment variable.
val props = Properties()
props.load(FileInputStream(System.getenv("ECC_CONFIGS_PATH")))
println(props.password)
When installing the app on the client's computer I'm going to create an application.properties file and the required env variable.
Is it a good approach or is it preferable to pass the file path to the application.properties using a -D parameter? In that case, how do you access its value in the application code?
Are there better approaches rather than the app properties?
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.
I have a sveltekit website that I deployed to cloudflare pages, the problem is that when I deploy the app with the static adapter and try to visit the site it says "No webpage was found for the web address" but when I use the cloudflare adapter it works successfully, so I was intending to use the cloudflare adapter but I noticed that the number of "Functions requests today" was increasing although my app does not have any functions (some how every request is counted as a server function), So what am I doing wrong here?
When you run npm run build does the build directory contain an index.html file? If not you may need to specify prerender.default = true like so:
import adapter from '#sveltejs/adapter-static';
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
prerender: {
default: true
}
}
};
export default config;
With that you should get a /build directory that contains index.html. Next just follow the instructions from Cloudflare Pages documentation for deploying your site https://developers.cloudflare.com/pages/framework-guides/deploy-anything/
These instructions include the following:
Deploying with Cloudflare Pages
Deploy your site to Pages by logging in to the Cloudflare dashboard > Account Home > Pages and selecting Create a project. Select the new GitHub repository that you created and, in the Set up builds and deployments section, provide the following information:
Configuration option
Value
Production branch
main
Build command (optional)
<YOUR_BUILD_COMMAND>
Build output directory
<YOUR_BUILD_DIR>
Unlike many of the framework guides, the build command and build directory for your site are going to be completely custom. If you do not need a build step, leave the Build command field empty and specify a Build output directory. The build output directory is where your application's content lives.
After configuring your site, you can begin your first deploy. Your custom build command (if provided) will run, and Pages will deploy your static site.
For the complete guide to deploying your first site to Cloudflare Pages, refer to the Get started guide.
After you have deployed your site, you will receive a unique subdomain for your project on *.pages.dev. Cloudflare Pages will automatically rebuild your project and deploy it. You will also get access to preview deployments on new pull requests, so you can preview how changes look to your site before deploying them to production.
From these instructions it looks like you only need to set Production branch to your main branch (or which ever branch you would like deployed) and Build output directory to build (unless otherwise specified in your svelte.config.json). Ensure that your .gitignore does not include the /build directory unless you want to use the Build command config then go ahead and do that.
I am new to vue js . I have multiple servers for api calls. I am using vue js for frontend but the problem is when i build the app for production vue is not giving me any static config file so where i can replace my server url for api calls without re build the vue app for each server.I just want to replace the url to work on same production app for all server without build for each.
Thanks
I solved it by creating JSON file in public folder e.g Server_config.JSON file in public folder and added my server ip address and imported that json file into my project from there after production build i can easily change the server ips.
I'm currently developing a simple webapp with seperated frontend (Vue) and backend (quarkus REST API) project. For now, I've setup a MVP, where the frontend is displaying some simple data which is called from the backend. To get a working MVP i need to setup CORS support. However, first i want to explain my setup:
Setup
I'm starting developing environment of my frontend with npm run serve and of my backend with ./mvnw quarkus:dev. Frontend is running on localhost:8081 and backend running on localhost:8080.
Heroku allows to run your apps locally aswell with the command heroku local web. Frontend is running on port 0.0.0.0:5001 and backend on 0.0.0.0:5000.
To achieve this setup i setup two .env files on my frontend which are pointing to my backend api. If i want to work in development mode the file .env.development is loaded:
VUE_APP_ROOT_API=http://localhost:8080
and if i run heroku local web the file .env.local with
VUE_APP_ROOT_API=0.0.0.0:5000
is loaded.
In my backend I've set
quarkus.http.cors=true
in my application.properties.
Now I want to deploy those two projects to heroku and use it in production. Therefore I setup two heroku projects and set a config variable in my frontend project with the following value:
VUE_APP_ROOT_API:https://mybackend.herokuapp.com
Calls from my frontend are successfully working!
Question
For the next step, I want to restrict it more and just enable my frontend to call my API. I know i can set something like
quarkus.http.cors.origins=myfrontend.herokuapp.com
However, I dont know how i could do this on quarkus with different environments (development, local and production)? I've found this link but I don't know how to configure heroku and my backend app correctly. Do i need to setup different profiles which are applied on my different environments? Or is there another solution? Do i need Herokus Config Variables?
Thanks for the help so far!
quarkus.http.cors.origins is overridable at runtime so you have several possibilities.
You could use a profile and have everything set up in your application.properties with %prod.quarkus.http.cors.origins=.... Then you either use -Dquarkus.profile=prod when launching your application or you use QUARKUS_PROFILE=prod as an environment variable.
Another option is to use an environment variable for quarkus.http.cors.origins. That would be QUARKUS_HTTP_CORS_ORIGINS=....
My recommendation would be to use a profile. That way you can safely check that all your configuration is consistent at a glance.