We Keep Coding

How to create multiple pages with different languages from one template?

I want to generate multiple pages which will have content on different languages from one common template. How can I do it with webpack?
I tried to use different webpack plugins like webpack-static-i18n-html, i18n-webpack-plugin but nothing works for me. The best thing I found is a webpack-static-i18n-html, but it has bad support and this plugin can't watch changes in JSON files with translated text. Below is what I have for now.
This is my code from webpack.common.js.
const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StaticI18nHtmlPlugin = require("webpack-static-i18n-html");
//...
module.exports = {
//...
plugins: [
//...
new StaticI18nHtmlPlugin({
locale: 'en',
locales: ['en', 'ua', 'ru'],
baseDir: Path.posix.join(__dirname, ".."),
outputDir: 'src/localized-pages',
outputDefault: '__lng__/__file__',
localesPath: 'src/locales',
files: 'src/templates/index.html'
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: Path.resolve(__dirname, '../src/templates/index.html')
}),
new HtmlWebpackPlugin({
filename: 'ua/index.html',
template: Path.resolve(__dirname, '../src/localized-pages/ua/src/templates/index.html')
}),
new HtmlWebpackPlugin({
filename: 'ru/index.html',
template: Path.resolve(__dirname, '../src/localized-pages/ru/src/templates/index.html')
}),
//...
],
//...
};
I also have webpack.dev.js and webpack.prod.js which I merge with webpack.common.js via webpack-merge plugin. As you can see, after generating pages, I have to use HtmlWebpackPlugin to serve them. It's awkward to use.
locales folder:
locales
|-en.json
|-ua.json
|-ru.json
en.json file:
{
"key": {
"innerKey" : "value"
}
}
Then plugin generates from:
<p data-t>key.innerKay</p>
this
<p>value</p>
But as I said, If I change en.json nothing will regenerate. I will not use this way to generate multiple pages for different languages.
So, I would like to generate several pages from one template. Is there any way to do this with webpack?

I was working on a multi language admin dashboard with Webpack and was wondering how could I tackle this problem until I found a way to make everything automatic with a multiple language web template.
First of all, webpack-static-i18n-html isn't a good solution because most of its packages are deprecated. But actually the mentioned package is based on a good npm package called node-static-i18n. So, the first thing you need to do is installing this npm package using this command
npm install -g static-i18n
Next, you need to make your translation file as *.json files and in json format and put them in a folder which I named "locales" and I put it in my "src" folder of my project. I need two languages for my website. One of them is English and another is Farsi or Persian. Therefore I made two file namely fa.json and en.json. So, I have folder and file structure like the picture below:
My file and folder structure in my Webpack project
This is part of my en.json file as an example:
{
"menu": {
"items": {
"dashboard": "Dashboard",
"posts": "Posts",
"media": "Media"
},
"sub": {
"items": {
"all-posts": "All Posts",
"add-new-post": "Add New",
"categories": "Categories"
}
}
}
}
This is part of my fa.json file as an example:
{
"menu": {
"items": {
"dashboard": "پیشخوان",
"posts": "نوشته ها",
"media": "رسانه"
},
"sub": {
"items": {
"all-posts": "نوشته ها",
"add-new-post": "افزودن نوشته",
"categories": "دسته ها"
}
}
}
}
and you can use them in your html tags like this:
<span class="className" data-t>menu.items.dashboard</span>
Please notice that for using translation you should use the attribute data-t in your tags like span then you can use key and values saved in your related json file to use translations between your tags. for more information about data-t and its usage please go to the plugin's Github page that I mentioned it earlier in this text on the plugin name.
Next, you should write needed command in the script section of your package.json file to run node-static-i18n to translate your template based on your html template file and save them in i18n folder in root of your project as below:
"scripts": {
"i18n": "static-i18n -l en -i fa -i en src --localesPath src/locales/",
}
in the above command:
-l: The default locale.
-i: the list of locales to be generated.
--localesPath: The directory of the translations, where each file should be named LOCALE_NAME.json
Now if you run npm run i18n this command should make a folder in root path of your project called i18n containing html files in two languages in this case. it will be like the picture below:
i18n folder and translated html files in it
Next you should config your Html Webpack Plugin in your Webpack config file to show these pages in your browser like this:
plugins: [
.
.
.
new HtmlWebpackPlugin({
//inject: false,
chunks: ['main'],
template: 'i18n/index.html',
filename: 'index.html'
}),
new HtmlWebpackPlugin({
//inject: false,
chunks: ['main-rtl'],
template: 'i18n/fa/index.html',
filename: 'fa/index.html'
})
]
because you need to see changes on your browser automatically you need another package called npm-watch to install through this command:
npm install -D npm-watch
Then, you should change script section of your package.json like this:
"scripts": {
"i18n-watch": "watch 'npm run i18n' src",
"i18n": "static-i18n -l en -i fa -i en src --localesPath src/locales/",
}
By using the command npm run i18n-watch whenever you make any changes in your locale files or your original html template in src folder it's gonna re-translate your html file based on new information and if you're running your webpack dev server you can see the result right after you save changes.
After that, to run i18n-watch command and your Webpack dev server at the same time it would be great installing another npm package for this purpose called npm-run-all by using the command below:
npm i -D npm-run-all
Finally, you can change the script section of your package.json like this to run i18n-watch and your Webpack dev server at the same time and after that if you make any changes you can see the result in the browser right after saving changes.
"scripts": {
"i18n-watch": "watch 'npm run i18n' src",
"i18n": "static-i18n -l en -i fa -i en src --localesPath src/locales/",
"webpack-dev": "webpack-dev-server --open --config=config/webpack.dev.js",
"start": "npm-run-all --parallel webpack-dev i18n-watch"
}
Now, if you use npm start in your terminal you will see your Webpack dev server and i18n-watch are running at the same time watching for any changes.
Hopefully this makes sense.

Angular Universal: "Project could not be found in workspace."

I'm trying to convert my existing Angular Project to work with Angular Universal (https://universal.angular.io/). I'm following this tutorial: https://github.com/angular/angular-cli/wiki/stories-universal-rendering. I'm stuck at the end of Step 3 (Building the Bundle). The name of my project is "fundercat". When I try to run:
ng run fundercat:server
I get the error:
Project 'dist/fundercat' could not be found in workspace.
Following the tutorial, I modified the following line in app.module.ts:
#NgModule({
imports: [
// Modified this line:
BrowserModule.withServerTransition({appId: 'fundercat'}),
And I added the following to angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fundercat": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
...
// added this block:
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/fundercat",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
}
Any idea what I'm doing wrong?

Double check that fundercat is the name of your project by looking at what is listed as the name in your package.json file. If the name is something other than fundercat, you will have to use that name in the command in order to build the server. For example, if your project is actually named FunderCat then you need to run ng run FunderCat:server to run the server.
I ran into a similar issue when I tried to add angular universal to the angular-tour-of-heroes project. The way the documentation was worded made it seem like "my-project" was some kind of special angular cli command for running the server. It's not. "my-project" refers to the name of the project you're working on. So I had to run ng run angular-tour-of-heroes:server to run the server in the tutorial project instead of ng run my-project:server.

How to import module from npmjs as Typescript not Javascript instead of using require [Ionic]

As I mention, I want to import a module but I don't understand the document.
I'm using Ionic for develop an app.
I install the module :
npm install wordnet
Instead of using ..
var wordnet = require('wordnet');
wordnet.lookup('define', function(err, definitions) {
definitions.forEach(function(definition) {
console.log(' words: %s', words.trim());
console.log(' %s', definition.glossary);
});
});
How to use the module in the Typescript file for using it function.. as
import { wordnet } from 'wordnet'
Do I need to import module in app.module.ts or in the page page.module.ts or something...?

It depends on your setup. If you're using AngularCLI, then it should find the TypeScript / JavaScript code automagically. Check your node-modules directory to make sure the code is there. If not add the --save-dev flag when you install:
npm install --save-dev wordnet
IF this library relies on binary assets or CSS files, then you may have to edit the angular-cli.json file to tell it where to find image or CSS files. Here is a snippet from the AngularCLI conversion I did in my Learn With books that shows how I set up assets and CSS.
"apps": [
{
"assets": [
"img",
{
"glob": "**/*",
"input": "../node_modules/#swimlane/ngx-datatable/release/assets/fonts",
"output": "./fonts"
}
],
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/#swimlane/ngx-datatable/release/assets/icons.css",
"../node_modules/#swimlane/ngx-datatable/release/themes/material.css"
],
}
],
If you're using SystemJS to load modules then you'll have to set up wordnet in your SystemJS config. Generally something like this:
(function (global) {
System.config({
map: {
'wordnet': 'path/to/wordnet/code'
},
});
})(this);

Webpack && npm, how can I create a script that can both be imported by another webpack project, or included as a script tag?

Let's say I'm using webpack 4 and have a project that looks like this:
/src/index.js
const Important = "Important Text"
export default Important
global.important = Important
I compile it using the following webpack confing:
output: {
libraryTarget: 'commonjs2',
},
module: {
rules: [
{ ...babelConfig }
]
}
And the package.json has:
{
...packageJsonContents
"name": "important-project",
"main": "./dist/main.js",
}
This will create the minified file /dist/main.js
I save that plugin to npm as testproject
Now I create another project, configure Webpack and npm install important-project.
In the /src/index.js:
import Important from 'important-project'
console.log(Important) //prints "Important Text"
This works, however my goal is for this to be a general use plugin and I want to also be able to include it as a script tag in other projects, however when I include it as a script tag, it complains that module is not defined.
<script src="node_modules/important-project/dist/main.js"></script>
What's the conventional approach here? Should I create two builds? One for in html, and another for in webpack?

Creating Directories using NPM Module fs-extra

I need some help.
I need to be able to create a directory structure which looks like the following:
parent
child1
folder1
folder2
child2
folder1
folder2
I'm currently using fs-extra (npm module). My issue is that the folder structure needs to be read from a .JSON file. When running say buildDir.js, it should read the .JSON file and create the above structure under a dist (distribution) folder. My current .JSON files looks like:
{
"directories": [
{
"type": "folder",
"name": "parent",
"path": "parent/child1"
},
...
]
}
p.s I'm quite new to Javascript so my code my be a little sparse in places.
Any help would be great.

var parsedJson = JSON.parse(fs.readFileSync("directories.json", "UTF-8"));
parsedJson.directories.forEach(function(value){
if(value.type == "folder"){
fs.mkdirSync(value.path);
}
});
console.log("It worked!");