Import module not in Webpack bundle - javascript

For my current project, I'm developing a frontend application that consumes a backend API. I would like to keep the URL of the backend dynamic (e.g. in a seperate config file). However, with Webpack, all defined variables end up in a bundle, which makes it hard to keep the backend URL dynamic (I'd have to dive in the bundle and change the URL).
How would I achieve this using Webpack 2? Basically I want to import a config file that gets excluded from the bundle so I can easily modify the config file later on.
My current solution is to define a window.config object in my index.html and read the window object from my application. I feel there should be a better way to achieve this though.

Related

How to add SSR to existing React.js application in Express.js

I have simple React application and I want to add SSR in Express.js.
I made a bit of a gaff in the beginning and in my repository I just have a frontend folder and in it the whole React app with typescript, babel and webpack configured.
I haven't played with SSR yet, so I'm curious, if I want to make such a server and have its file in the folder next to the frontend folder, would I have to install and set all the dependencies I made inside the`frontend folder, and only then create the server.js file ?
Then in the middle of "frontend/src" I would have 2 files - index.tsx (with React.render() method), because I would like to be able to run the application also without the server. And 2nd file would be indexServer.tsx with React.hydrate() method, which would go to server.js file (i.e. would be for generating application by server). Is this concept right ?
Link to my github repo with this react app: https://github.com/poldeeek/spider-game
If I want to make such a server and have its file in the folder next to the frontend folder, would I have to install and set all the dependencies I made inside the`frontend folder, and only then create the server.js file ?
You'll probably need to re-install all the dependencies if you choose to setup two separate folders like that. I would recommend putting server.js in frontend/server, which can then use the same node_modules as your frontend/src/index.js is using.
Then in the middle of "frontend/src" I would have 2 files - index.tsx (with React.render() method), because I would like to be able to run the application also without the server. And 2nd file would be indexServer.tsx with React.hydrate() method, which would go to server.js file (i.e. would be for generating application by server). Is this concept right ?
There is no right or wrong answer here. If this setup suits your needs, then go with it. The only challenge with this setup is that you have to configure babel and webpack to point to two different files: index.tsx (in case you don't want the server) and indexServer.tsx (in case you want to include the server).

How to conditionally import different files during build in Angular 6?

Overview
I have Angular 6 app build by Angular CLI. Application is written in multiple languages. Each language has JSON file with translations of all the application texts. The filenames are ${language}.json, e.g. en.json, es.json, pl.json.
I'd like to set the language of the app during build - build the app only in one language. For that on build I need to import a single translation file, which is chosen depending on which language I'm building for.
Problem
How to conditionally import single translation file only for the language chosen during build?
In addition I'd like the translation file to be bundled together with the rest of my application's JavaScript, instead of being loaded on demand on run-time.
Sketch of a solution
const translations = import(`./translations/${lang}.json`);
Actually the above code works in Angular 6/Webpack (the only thing needed is setting compilerOptions.module: 'ESNext' in tsconfig.app.json), but not in a way that I want. Instead of resolving the import during build time and bundling the translation file together with the rest of the code, it creates a separate files (chunks) for all translations, one of which is then loaded on demand during run-time depending on the value of JavaScript lang variable.
So how do I make the import to be resolved during build-time and not run-time? Also where and how do I set lang variable during build, as I don't have access to Webpack configuration (it's hidden inside Angular CLI)
Webpack alone
When using Webpack alone, it's possible to implement this for example by using NormalModuleReplacementPlugin. But as Angular CLI hides all the Webpack configuration, I don't know how to integrate it into Angular project. Ejecting Webpack configuration from Angular CLI is the last resort for me.
As part of the CLI 6.1 release, a feature was added that allows files to be replaced during the build other than .ts files. Previously this was used for the environment and environment.prod files
Additional files can now be set with the fileReplacements key of the angular.json configurations. As far as I know, it should work with asset files, so .json should work. It's only been added recently, but there are issues/feature details that you can look up
Let us know if it works out!
P.S. If you don't want to complicate the angular.json configuration, you could create a .js node script, and run it before doing the build, passing in the language as a param, and replacing the relevant .json file in before building the Angular bundles

How to Import non npm dependency in angular

I am working on angular 5 project want to create a visualization of an application system internal connection (something like a flowchart where systems internal components like server, mq, db can be dragged upon and connection be made) component in angular. Started with the jsplumb community edition (link) to do the same. Was able to successfully integrate jsplumb into angular 5 application. The only drawback is we cannot create the new element at runtime (That is drag and drop items and create connection). This is possible in the toolkit licenced version. Which I am not considering to work with.
So was looking into js-graph-it (link) The js-graph-it is a old project works nicely with simple html page. I am having problem injecting js-graph-it.js file into the angular project. As it is non npm file it is not defined and the system does not recognize the same if syntax like import { jsgt } from '../../assets/jsgraphit/js is used. If you observer I have placed the files in my asset folder. The first question is this the right place for 3rd party js file if not present in npm? How to import or the correct way to import such files not present in npm ?
You can import 3rd party JS files into your project and be bundled by the CLI by putting them in the scripts array in your angular-cli.json config file.
This will make them part of the global scope (e.g. available on the window object) as if you imported it via a <script> tag.
You can additionally include any CSS files or other assets part of the libraries in the config file as well via the styles and assets properties.
I think the proper way for you to manage these 3rd party libs is to store them in your assets directory as it looks like you are already doing.

React: Load Component stored on a webserver

the main question is: Is there a good way in ReactJs to load a React Component stores on a webserver?
I already reached the goal to do this but I think my way isn't the best.
Let me explain what I currently do:
I have a core project called "dashboard". This core project has the functionality to load javascript via an XHR request. After the request is done, I call window.eval to use this code.
I have a module called "todoModule". This module is the component (or project) stored on the webserver. The todoModule will automatically inject his own code into the navigation bar of the "dashboard" project. The bad thing is, that the "todoModule" has bundled a total size of 1.2MB. And this is too large to load it via an XHR request. I do the bundling via webpack. I already externaled React, ReactDOM, ReactRouter and so one, to use the dependencies of the "dashboard" project. But it is always to big. And the "todoModule" can have his own dependencies, which I dont need in the core project.
I have an other idea to do this:
Store all dependencies in the core project
Build the module with babel --outDir ./lib ./src to just compile the Javascript files without dependencies. The compilied files will have a size of 33KB.
Upload the compilied files on the webserver.
But I don't know how to implement the features, that the module will always use the dependencies of the core project.
Maybe you can help me or give an other solution.
Thanks
EDIT (Solution):
It is not possible to load compiled components from a webserver in a good way. My solution is to deploy a reactjs application anywhere and use postrobot (https://github.com/krakenjs/post-robot) for the communication

Loading prebuilt webpack bundles at runtime

Is it possible to require dynamic bundles at runtime with webpack? Let assume I have two separate bundles from two separate builds and I want to load modules from one bundle into another at runtime, dynamically without knowing during compilation which bundle and at what path this bundle would exist. It could be another file in directory or file from cdn.
To be detailed, prebuilt library exports something like this:
export default { Component, someFunction, otherFunction }
Every library has the same format and server provides information about path to this library at runtime. I'm thinking about something like
pathToBundle = "http://cdn" or "/bundles/name.js"
import(pathToBundle).then(module => {}).catch(error => {})
Whole gimmick is loading prebuilt bundles that are dynamically defined. I know I can do similar thing but I have to know bundles at runtime or even build them during the same bundling process and split as separate chunks.
My inspiration is Atom plugin system but for web without file system and Node context as Atom has. I have full access to server so anything server can do over http/ws could work.
I was initially thinking about something like webpack-dev-server but I don't want to rebuild whole application. My goal is to eliminate Node runtime dependency at server because I'm using other backend language for that right now and only provide already built bundles.

Categories