Nuxt JS - reading conf/env file in static site generation - vue.js

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.

Related

How to bundle next.js app as a javascript widget or npm package?

I have a survey built with Next.js using Incremental Static Regeneration (ISR). I would like to bundle it so I can can either publish it to npm or host a single entry file so I can use the survey on other applications.
It's currently hosted on Vercel and uses getStaticProps and getStaticPaths to call my API of 'surveys' and 'survey questions'. ISR is great because it allows me to dynamically load each step of the survey based off of the API structure and if I modify it then the revalidate property will regenerate the new order or questions from the survey. It also lets me get away with only having one page for all surveys/question types.
My App structure is like this:
- src
- pages
- [surveyid]
- [...question].tsx
Based on the request (and response that was received during build time/revalidation) the static files for the survey-id are created and the next router will route to each survey question based off the next step in the json object from the api eg., /surveyid/question-1, /surveyid/question-2 etc..
This is all working well in production when deployed to Vercel.
When it comes to bundling this so a survey can be loaded into other sites I have been quite lost.
When I run next build it builds the prod files that are served to vercel but there are many entry points and not a single .js file.
I tried running next export and serving the .out folder locally and the pages and links are accurate but this breaks the ISR and after reading next.js documentation it states that next export doesn't work with ISR.
Ideally I would like to be able to build the application to a single entry file eg., index.js and then either publish as a package to npm or host on my server. Then load the survey by installing the package or adding the direct url to the src file of a script tag in my other projects eg., <script src='https://survey.com/widget.js'></script> and provide some settings/options to the request so I can tell it which survey to return.
Is there a way for this to be done while still maintaining ISR?
Would I have to create some sort of entry file to dispatch the request and return the static files from my vercel server instead as a workaround?
I am currently trying to see if I can use rollup to build it out to a single file but I am unsure if this will break the next router when it comes to the dynamic rendering (or revalidation) of pages.
In a perfect world I would like to leverage some of the cool features of next like their middleware to determine the geolocation from the request header as well. But i'm happy if I can just get the survey to render in another project at this point.

How to create multiple env file in vue / nuxt js and access env by domain

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

Is there a way to have a generated nuxt app and only change the .env file in the server without having to regenerate the code?

The request is to edit the .env and the generated nuxt app to catch the changes, to have different variables for different servers, is that doable somehow?
As I know there is no way to change .env file without regenerating code
Therefor most developer use Docker to solve this problem:
https://jonathanmh.com/deploying-a-nuxt-js-app-with-docker/

Issues with intern-runner and proxyUrl that contains subfolders

I need to setup intern to test ajax calls from a different server. I set everything up sort of following the official wiki in this address
https://github.com/theintern/intern/wiki/Using-Intern-to-unit-test-Ajax-calls
My config file has proxyUrl set to http://localhost:8080/sub
and http://localhost:8080/sub is setup as a reverse proxy to inter-runner in http://localhost:9000
When I run ./node_modules/.bin/intern-runner -config=tests/config from the tests root folder, the browser opens up and is able to request several files, until it tries to request the config file. That's when it receives a 404, because it requests the wrong address - http://localhost:8080/tests/config.js - without the sub folder.
I'm wondering if I'm missing something inside the config file, or if intern is not able to use proxies with subfolders. I tried to set the baseUrl parameter, but it had no effect.
Any ideas?
Update:
It seems that sometimes intern-runner uses the path provided in the config param, and sometimes it uses the one in the proxyUrl parameter inside the config file. As a workaround, what I did was to place the config file and the tests on 2 folders (actually I made a symbolic link). The first on tests/ and the second on sub/tests/ and ran it using ./node_modules/.bin/intern-runner -config=sub/tests/config.
It works, but it's kind of stupid and I really wished there was a better way to do it.
This is indeed a limitation/bug of intern. It assumes that the proxy sits at the root of the absolute domain name, i.e. that it has a pathname of /.
An issue has been created on intern's github repository here and the corresponding pull request that fixes the problem is here. Hopefully this gets merged into the upcoming 2.1 release of intern.

how to upload site to the server

I have a question....I'm using FileZilla to upload my eclipse project to the server. Now, it's the first time I do that and I don't know where to start. (I really don't want to do disasters)
in this image there is the composition of folders: on the left there is my project and on the right there is the server's folders.
http://img22.imageshack.us/img22/2519/jbecagca.png
In the folder WebContent I have also my 4 html files and one of these is index.html that is the page that has to be shown when I write the url of the site.
Now the question is... Where do I have to put my servlets? where my classes? where my sql dump of my database? where my html pages? where my js files?
I really have no idea.
thanks for any help!!
Go to your web host ask address for sql database you need to make a database on any of their server then it can be used you cant just use by uploading .
js files and classes will be used same hierarchy you used time of development.
If you're uploading a project, you should probably keep the project's folder structure. You should upload the whole project folder as is to the webroot, so you can access it from your browser