I want to pass in a replacement JSON file at the deployment of my application container.
Context
I have a next.js application with a JSON file that contains some data, the file is imported to the classes where needed, all works fine.
After building the JSON file does not exist, it seems to be embedded directly in the classes that it's imported by.
The application is dockerized and the container is deployed via a helm chart, it's at this point when deploying I want to provide a new JSON file but as the file is not in the build files I can't replace it.
Is there a nextjs config that will allow me to keep the JSON file external thus allowing me to replace it when deploying without re-building the container?
during the build process, webpack creates ES modules from the imported JSON files.
you might want to consider one of the following.
try loading the JSON file from an external server. this could be done using a simple fetch. if placed in the getStaticProps or getServerSideProps this request would only be made during the build and on each request respectively.
use the dynamic import feature
import(
'path-to-your-json'
);
Related
I have a very particular use case. I want to import a javascript file as a string and inject it into html responses at will in a service worker. I can't see how to do this using parceljs beyond hosting the javascript file somewhere and doing fetch at runtime to load the js file into memory. However, I want to do this at build time. How best to do this?
Note: Ideally the dependencies of javascript file I am importing should be bundled into the string.
Seems to be possible in parcel 2 with
import js from "bundle-text:./b.ts";
console.log(js);
https://v2.parceljs.org/configuration/plugin-configuration/#predefined-(offical)-named-pipelines
I want to download the complete project from the cdnjs cloud to local folder.
I have tried this:
import requests
files = requests.get("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML%2CSafe.js&ver=4.1")
with open("mathjax.js","w") as file:
file.write(files.text)
Now this download the js file. When I tried using the same code to get the project instead of the js file, the output was weird.
So I tried using the cdnjs and check what happens when I use cdnjs cloud and when I use local file.
I have got this difference as shown in the images:
Using cdnjs:
Using Local file:
How I can get the similar structure as I get when I use cdnjs?
Kindly, advise me.
The URL you are providing to requests module is just the URL of one file MathJax.js, that is why you are getting only that file as output.
What you want is to download the complete directory mathjax/2.7.5/. However, if we request the whole directory, the server forbids such requests.
An alternate approach is to get relative paths of all the files from the main directory, which you already have as you showed in image. You can then download each of the file independently and store it into its respective folder. You'll have the whole directory ready at the end.
Try the following code for this purpose.
import requests
import os
baseUrl="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/" #Base URL for the main directory
#List containing relative paths of all required files
relativePaths=['config/Safe.js?V=2.7.5',
'config/TeX-AMS-MML_HTMLorMML.js?V=2.7.5',
'extensions/Safe.js?V=2.7.5',
'jax/output/SVG/fonts/TeX/fontdata.js?V=2.7.5',
'jax/output/SVG/jax.js?V=2.7.5',
'MathJax.js?config=TeX-AMS-MML_HTMLorMML%2CSafe.js&ver=4.1']
parentDir='\\'.join(baseUrl.split('/')[-3:]) #Parent directory from URL
for path in relativePaths: #For all files
req=requests.get(baseUrl+path) #forming url
filename=path.split("/")[-1].split("?")[0] #extracting filename out of url
directory=os.path.join(parentDir,"\\".join(path.split('/')[:-1])) #Extracting directories path for local path formation
if not os.path.exists(directory): #Creating local direcories if they do not exist
os.makedirs(directory)
with open(os.path.join(directory,filename),"wb+") as file: #Storing results into files
file.write(req.content)
Local Directory Structure Output:
Beyond iterating over a defined list of files, you could also look at a couple of other options that could take a more dynamic approach to fetch files from the CDN.
cdnjs is powered by a GitHub repository, so you could explore cloning it and extracting files (I'd recommend use sparse-checkout if you do this due to repo size) or you could look at using the GitHub API to navigate the repository an extract files: github.com/cdnjs/cdnjs/tree/master/ajax/libs/mathjax/2.7.5
We actually have an API available for cdnjs, which allows you to rather easily get all the files within a version of a library. Using that list, you could then perform a similar iterative solution to what Hamza suggested to get a copy of all the files locally: https://api.cdnjs.com/libraries/mathjax?fields=assets (annoyingly we've not yet implemented API navigation per version)
Hope that helps!
Matt, cdnjs maintainer.
I am taking the first steps in learning how to develop within the meteor.js framework using my Windows 10 PC.
In windows, when creating a new app, the system creates a folder with
separate sub-folders for client and server .js files.
My question is if I define a new Mongo collection inside the server.js file, how can I access that collection from the client.js file?
what you're asking is OS-agnostic.
i think you already know that files within a folder called "server" are not seen by the client, and likewise files within a folder called "client" are not seen by the server.
Meteor will eagerly serve files outside such folders to both the client and the server (unless it's in a folder called "imports", more on that in a moment).
so if your project is set up with top-level folders called "client" and "server", it is common to make a folder called "collections", also at the top-level, to define the collections.
so let's say you have a file called collections/News.js:
News = new Mongo.Collection('news');
when that file is served to the server, it will create that collection in Mongo. when that file is served to the client, it will create a local collection in minimongo and associate it with the real collection. in both instances, "News" is a global variable you can access from anywhere.
so that should answer your question.
going further, MDG is recommending a new directory structure going forward. you can read about it here: https://guide.meteor.com/structure.html
in short, they want us to move to a model where files are not eagerly loaded, but explicitly imported by our code. during the transition period, we are meant to put our files into /imports. files in there are not eagerly loaded.
using the same example above, "News" would probably exist in its own area, as a module, in a file like this:
imports/api/news/News.js
const News = new Mongo.Collection('news');
export {News};
here, the file is not eagerly imported, but whatever code relies on News would have to import that module:
import {News} from '/imports/api/news/News';
that import would work in both client and server code.
I have an angular application which uses browserify to modularise the Javascript components.
I have a config file which holds environment specific information which I also have as a module, so I can require it to get access to this information. For example another module can just var config = require("./config) and then use this config object to access the configuration information
However I do not want this file to be added to the bundle.js since I want it to be easily editable and no compilation to be required if the information inside it is changed.
Is there a way I can still access it using require but not have it added to the bundle?
You can parse a json file and read its contents with this: https://nodejs.org/api/fs.html
I have a json file in my react-native project how do I access it in one of my components?
The structure of the project
It has index.js and App on the same level
Then it has components on the next level
In components it has databases and Main.js
In databases it has database.json
I want to use information held in database.json inside Main.js, I can also change the file structure not sure what is the best way to do this.
Thanks for any help
You can just require your JSON file like any regular javascript file.
let data = require('../../database.json')