As I told in this .
And one of things that I don't like in the integration with Astro and , I've working in another projects, small and very large projects, and Nx really helps to organize code by splitting in modules/libs.
The idea in this article is share how to integrate Astro with Nx and create an i18n module to centralize all messages and paraglide things in one module.
Creating repo
First of all we need to create our start repository.
Just to skip Astro and Paraglide setup, I will start from my last article repository:
Feel free to select any other option that command show, this won't impact in this tutorial.
Adding i18n module
If you already uses Nx, you are familiar with Nx Plugins, but if not I will introduce you.
Nx uses a plugin architecture, which you can add or remove a plugin to add or remove features in your workspace.
These plugins can add or any other Nx feature.
In our case, we need to create a JS library module, so we will need to plugin JS plugin, called @nx/js.
You can find all Nx Plugins here: that make all generators visually (there are other feature too). So I highly recommend to install this.
But if you doesn't want to use extension or don't use VSCode, no problem, we can run this in terminal:
npx nx generate @nx/js:library --name=i18n --bundler=swc --directory=libs/i18n --importPath=@astro-nx-paraglide/i18n --projectNameAndRootFormat=as-provided --unitTestRunner=none --no-interactive
This will create a module as JS Library using JS plugin, inside libs/i18n path with import path @astro-nx-paraglide/i18n.
You can change to your configs here.
If you want to use VSCode extension, open command palette, search for Nx generate (ui) and select @nx/js:library, add these information in new window:
Setup Paraglide to i18n module
To configure Paraglide in our i18n module, we need to change some things in Paraglide config.
First of all, open your Astro config (like astro.config.mjs) and change paraglide integration outdir:
import { defineConfig } from 'astro/config';
import paraglide from '@inlang/paraglide-astro';
export default defineConfig({
// Use astro's i18n routing for deciding which language to use
i18n: {
locales: ['en', 'pt-br'],
defaultLocale: 'en',
},
output: 'server',
integrations: [
paraglide({
// recommended settings
project: './project.inlang',
outdir: './libs/i18n/src/paraglide', // <=== HERE
}),
],
});
It will setup Astro + Paraglide to looks inside this folder (in code we will import in other way).
We need to setup package.json scripts changing paraglide output dir in build time (build and postinstall script):
{
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "paraglide-js compile --project ./project.inlang --outdir ./libs/i18n/src/paraglide && astro check && astro build",
"preview": "astro preview",
"astro": "astro",
"postinstall": "paraglide-js compile --project ./project.inlang --outdir ./libs/i18n/src/paraglide"
},
}
Now we can rerun postinstall script to regenerate paraglide folder: npm run postinstall
After all we have this folder strucuture:
Just clone repository, run install and start project:
git clone https://github.com/alancpazetto/astro-nx-paraglide
cd astro-nx-paraglide
npm install
npm start
Thanks to read and don't forget to give a heat in this article if you like and leave a comment.
SOCIAL SHARE CARD GENERATOR