<h1>Automating Ionic mobile applicaton building</h1>
Today for developing a cross-platform application, you have a lot of options, like <a href="https://flutter.dev">Flutter</a>, <a href="https://cordova.apache.org/">Cordova</a>, <a href="https://ionicframework.com/">Ionic</a>, <a href="https://reactnative.dev/">React Native</a> and so on. 
When comes to development, frameworks/solutions, which utilize JavaScript are quite popular, due to the smoother transition from Web to Mobile. 
In this article let&#39;s focus on Ionic framework, which is framework-agnostic and can be developed with Vanilla JS. 
Namely, we will be looking at <a href="https://capacitorjs.com/">Capacitor</a>, which is recommended by Ionic team.
<h2>How to create Vanilla Ionic project</h2>
As been mentioned, Ionic have possibility to build with such libraries/frameworks as React/Angular, but it does not limiting in choice of frameworks. 
Let&#39;s create a folder <code>vanilla-ionic-app</code> and install Ionic dependencies. In this example we&#39;ll use yarn, but you can utilize <code>npm</code> as well.
We will also use Webpack for better 
<pre><code class="hljs language-bash">mkdir vanilla-ionic-app
cd vanilla-ionic-app
npm init -y 
yarn add -D @capacitor/core @capacitor/cli @capacitor/android webpack webpack-cli html-webpack-plugin
npx cap init 
npx cap add android
</code></pre>This should create a basic skeleton, where you should be able to write smallest example for building application
Open your preferred text editor and make following changes: 
<ol>
<li>Add src/index.js file and fill it with following:</li>
</ol>
<pre><code class="hljs language-javascript">function App() {
 // let&#x27;s show to user simple greeting
 const helloWorld = document.createElement(&#x27;h1&#x27;);
 helloWorld.innerHTML = &#x27;Hello World!&#x27;;
 document.body.appendChild(helloWorld);
}
App();
</code></pre><ol start="2">
<li>Make sure, that your capacitor.config.json looks similar to this:</li>
</ol>
<pre><code class="hljs language-json">{
 &quot;appId&quot;: &quot;com.example.app&quot;,
 &quot;appName&quot;: &quot;vanilla-ionic-app&quot;,
 &quot;webDir&quot;: &quot;build&quot;,
 &quot;bundledWebRuntime&quot;: false
}
</code></pre><h2>Creating the necessary steps in Gitlab pipeline</h2>
For compilation of Capacitor application you should have both NodeJS and Java installed on the system. 
For that reason, we have constructed a <a href="https://github.com/FallenAngel97/alpine-android-nodejs">base Docker image</a>, which we will use in this example.
In order to compile the Ionic/Capactitor application you need to execute the build step for Webpack, copy result to the <code>android</code> folder and compile using Gradle
For reference, you can use snippet below and adjust for your needs
<pre><code class="hljs language-yaml">default:
 image: ghcr.io/fallenangel97/alpine-android-nodejs:master

stages:
- build

build_android:
 stage: build
 script:
 - yarn
 - yarn build
 - npx cap sync android
 - npx cap copy
 - cd android
 - ./gradlew bundleRelease
 - cp ./app/build/outputs/bundle/release/app-release.aab ../app-release.aab

 artifacts:
 paths:
 - ./app-release.aab
 expire_in: 1 week
</code></pre>Photo by <a href="https://unsplash.com/@dovilerm?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Dovile Ramoskaite</a> on <a href="https://unsplash.com/s/photos/vanilla?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

How to automate building your Ionic application on gitlab

<h1>How to test microservice with mocks from NestJS 2022</h1>
<h2>What are disadvantages of using microservices?</h2>
With the microservice approach, there is increased complexity in the support, 
especially with the strategies for testing. 
As with every part of the software, we can cover them with the unit tests, but
due to the distributed nature of microservices, you can occur in the situation 
that there is a necessity to mock a lot of API calls, so the contract between 
microservices can be broken.
To be able to correctly 
<h2>Extract the OpenAPI schema from the NestJS application</h2>
In order to retrieve the schema from the NestJS application, you can create a 
script, which imports application module in the script and writes to the filesystem.
<pre><code class="hljs language-typescript">import { NestFactory } from &quot;@nestjs/core&quot;;
import { DocumentBuilder, SwaggerModule } from &quot;@nestjs/swagger&quot;;
import { AppModule } from &quot;../app.module&quot;;
import * as fs from &#x27;fs&#x27;;

const options = new DocumentBuilder()
 .setTitle(&quot;Title&quot;)
 .setDescription(&quot;description&quot;)
 .setVersion(&quot;1.0&quot;)
 .build();

NestFactory.create(AppModule).then((app) =&gt; {
 const document = SwaggerModule.createDocument(app, options);
 SwaggerModule.setup(&#x27;api&#x27;, app, document); 

 fs.writeFileSync(&quot;./swagger-spec.json&quot;, JSON.stringify(document)); // write down the OpenAPI document
 app.close(); // Exit the application without listening
});
</code></pre><h2>Run the mock server from OpenAPI definition</h2>
After extracting the schema, you can utilize <a href="https://github.com/stoplightio/prism">prism</a>
to start the mock server. 
<pre><code class="hljs language-bash">prism mock ./swagger-spec.json -p 3000 -h 0.0.0.0
</code></pre>After it, you should be able to see output, stating that mock server should be up and running
<img src="/blog/nestjs-mock-prism/screenshot-of-prism.png" alt="Screenshot of Prism running on the localhost">
This setup allows you to provide necessary minimum mock server, which should be able to meet the 
requirements of your contract tests. 
You can put obtained OpenAPI JSON file and execute command above in your CI/CD setup.
Photo by <a href="https://unsplash.com/@halacious?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Hal Gatewood</a> on <a href="https://unsplash.com/s/photos/prototype?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Testing on NestJS mocks

<h1>How to auto deploy from Gitlab to VPS with Docker Swarm</h1>
When working with the dynamically changing websites, it&#39;s crucical to have
own CI/CD process. This way you can speed up the delivery of the product from
development to the end customers. Nowadays, multiple Git hosting services are
providing custom CI/CD pipelines, which can be extended as you like. For this 
post, let&#39;s take <a href="https://gitlab.com">Gitlab</a> as an example of hosting provider.
<h2>Docker swarm configuration</h2>
<a href="https://docs.docker.com/engine/swarm/">Docker swarm</a>, in short, is a way how 
to orchestrate your docker containers. Within the swarm stack you can define 
decentralization and optimize your scaling. For this tutorial, let&#39;s define 
some sample swarm by executing following commands:
<pre><code class="hljs language-bash">docker swarm init --advertise-addr &lt;your_ip_address&gt; # this command outputs swarm join command
docker swarm join --token &lt;token&gt; &lt;ip_address&gt; # replace it with the command above
</code></pre>Next, we will need to create a docker compose file, which can be updated from
the pipeline. 
You can use following example as the starting point: 
<pre><code class="hljs language-yaml">version: &#x27;3.7&#x27;
services:
 # ... other services
 node_container:
 image: $DOCKER_IMAGE # necessary for dynamic substitution of the image
 ports:
 - &quot;3000:3000&quot; # modify it with your own ports which the application is listening to
 deploy: # necessary to provide the behaviour for updating the stack
 update_config:
 order: start-first
 failure_action: rollback
 delay: 10s
 rollback_config:
 parallelism: 0
 order: stop-first
 restart_policy:
 condition: any
 delay: 5s
 max_attempts: 3
 window: 120s 
</code></pre>With the minimal setup above, let&#39;s try to spin up the server with the following command: 
<pre><code class="hljs language-bash">docker stack deploy -c /path/to/compose --with-registry-auth gitlab-automation-example
</code></pre><h2>Gitlab runner</h2>
After successfully finishing previous section, you should already have a spined up 
compose with the microservices. 
Let&#39;s proceed with this process by installing the Gitlab runner and configuring it on 
your VPS. 
You should follow Gitlab documentation for installation of the Gitlab runner <a href="https://docs.gitlab.com/runner/install/linux-repository.html">here</a>
But in case you are using Ubuntu/Debian, you can just copy-paste following commands:
<pre><code class="hljs language-bash">curl -L &quot;https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh&quot; | sudo bash
sudo apt-get install gitlab-runner
</code></pre>After this, go to your project settings and copy-paste token and URL for your use case
<img src="/blog/example-of-gitlab-tokens.png" alt="Example of Gitlab tokens">
<pre><code class="hljs language-bash">sudo gitlab-runner register -n \
 --url https://gitlab.com/ \
 --registration-token REGISTRATION_TOKEN \
 --executor shell \
 --description &quot;My Runner&quot;
sudo usermod -aG docker gitlab-runner
</code></pre>If you will reload page on Gitlab, you should see, that your runner should be listed under 
&quot;Available specific runners&quot;
<img src="/blog/added-runner-gitlab.png" alt="Example of specific runner">
<h2>.gitlab-ci.yml</h2>
The final step to compile your project is to construct the .gitlab-ci.yml. 
The complete guide is located <a href="https://docs.gitlab.com/ee/ci/yaml/gitlab_ci_yaml.html">here</a>, but you can read 
example here and follow it to construct your own. 
<pre><code class="hljs language-yaml">image: docker:20.10.16

variables:
 GIT_DEPTH: 1 # To keep the .git folder small enough, let&#x27;s limit shallow to 1 https://docs.gitlab.com/ee/ci/pipelines/settings.html#limit-the-number-of-changes-fetched-during-clone

stages: # this instructions indicates the amount and order of steps in your pipeline
 - build
 - deploy

build-docker-image:
 stage: build
 variables:
 IMAGE_TAG: $CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA
 script:
 - echo &quot;Building Docker image $IMAGE_TAG ...&quot;
 - echo &quot;Credentials $CI_REGISTRY_USER - $CI_REGISTRY_PASSWORD ${CI_REGISTRY}&quot;
 - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD ${CI_REGISTRY}
 - docker build -t $IMAGE_TAG .
 - docker push $IMAGE_TAG
 - docker system prune --force

deploy:
 stage: deploy
 variables:
 IMAGE_TAG: $CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA
 script:
 - echo &quot;Updating the container...&quot;
 - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD ${CI_REGISTRY} # In order to fetch the necessary image, you should login to gitlab registry beforehand
 - DOCKER_IMAGE=$IMAGE_TAG docker stack deploy -c /home/gitlab-runner/deploy/compose.yml --with-registry-auth gitlab-automation-example # replace &quot;gitlab-automation-example&quot; with your own service created in previous steps
 - docker container prune --force
 - docker image prune --force # this ensures that after building of the image, we clean everything after ourselves
</code></pre>If you have followed tutorial step by step, in the end you should be having following picture with your pipeline configuration: 
<img src="/blog/example-of-pipeline.png" alt="Example of pipeline">
Photo by Lukas: <a href="https://www.pexels.com/photo/boats-near-dock-296242/">https://www.pexels.com/photo/boats-near-dock-296242/</a>

How to deploy from Gitlab to VPS 2022

<h1>How to generate DOCX from Markdown</h1>
Markdown is a format, which is usually used for communication and providing documentation
for developers and technical products. Markdown supports a lot of necessary features,
which help with organizing your documentation. 
Yet, for sharing the documents, usually used DOCX standard, which can be edited
via specialized software, despite markdown can be edited in any text editor.
For converting documents, we can use pandoc utility, which can achieve exactly 
desired behavior by converting from one format to another.
Pandoc can be extended by Lua filters and tweaked per our needs. 
<pre><code class="hljs language-lua">local cacheLinks = {} -- Stores the found local links in the repository

function file_exists(name)
 local f=io.open(name,&quot;r&quot;)
 if f~=nil then io.close(f) return true else return false end
end

function Link (link, target, title, attr)
 local linkTarget = link.target -- where the link points to
 if file_exists(linkTarget) then
 print(&quot;Found the link: &quot; .. linkTarget)
 table.insert(cacheLinks, linkTarget)
 return {}, {}, {}, {} -- return empty table, which will remove Link from the flow of the document
 end
 return link
end

function Pandoc(blocks, meta)
 local paragraphs = {}
 for i = 1, #cacheLinks do -- iterate over the local links table
 local fh = io.open(cacheLinks[i]) -- read the contents of that linked file
 local contents = pandoc.read( -- parse it with pandoc with markdown parser
 fh:read &#x27;*a&#x27;,
 &quot;markdown&quot;,
 PANDOC_READER_OPTIONS
 ).blocks
 blocks.blocks:extend(contents) -- append parsed data to the end of the document
 end
 return blocks, meta
end
</code></pre>Then, inside your pipeline, you should call the following:
<pre><code class="hljs language-bash">pandoc --lua-filter fix-links-multiple-files.lua -o output.docx -f markdown -t docx README.md --toc
</code></pre>Photo by Kindel Media: <a href="https://www.pexels.com/photo/a-close-up-shot-of-paper-clipped-documents-7054757/">https://www.pexels.com/photo/a-close-up-shot-of-paper-clipped-documents-7054757/</a>

Generating of DOCX from Markdown

<h1>Automate screenshots creation</h1>
When working in the Agile team, it&#39;s necessary to keep the documentation up to date and monitor changes. 
It&#39;s especially important for those cases, when the team changes and there should be onboarding
for the newcomers. Often newcomers are directed to read the documentation, which covers the 
basic needs. Due to the fact, that we all are humans, we understand by example better. 
Such examples can be shown in screenshots, but screenshots need to be updated on a regular basis. 
<h2>Pre-requisites for the web application screenshots</h2>
Let&#39;s for simplicity spin up <a href="https://create-react-app.dev/">CRA</a> by following their official tutorial: <a href="https://create-react-app.dev/docs/getting-started">https://create-react-app.dev/docs/getting-started</a>
in this example, we will use <code>screenshots-cra</code> for the name of the bootstrapped folder. 
To be able to draw attention to specific part of our page, we would like to select the necessary visual element 
let&#39;s define following function in the <code>screenshots-cra/src/index.js</code>:
<pre><code class="hljs language-javascript">window.highlightElement = (elementQuery) =&gt; {
 const element = document.querySelector(elementQuery); // retrieve DOM element for highlighting
 if (!element) {
 return console.error(`Element &quot;${elementQuery}&quot; not found!`);
 }
 element.style.outlineOffset = &#x27;2px&#x27;; // make outline for the selected DOM element
 element.style.outline = &#x27;2px red solid&#x27;;
 console.log(`Highlighted element ${elementQuery}`);
};
</code></pre><h2>Screenshots generation process</h2>
The general practice to make a screenshot is to use some headless browser,
render page there and write output to the file. 
In this example will be used <a href="https://pptr.dev/">puppeteer</a> for achieving screenshot capturing functionality. 
Let&#39;s also use the <a href="">dotenv</a> package, so that we can define some environment variables for specifying URL
where we should make the screenshots. 
Let&#39;s create <code>screenshots-generation.js</code> and fill it with following contents: 
<pre><code class="hljs language-javascript">const puppeteer = require(&quot;puppeteer&quot;);

require(&#x27;dotenv&#x27;).config();

const url = process.env.URL || &#x27;http://localhost:3000&#x27;;
const fileNamePrefix = process.env.FILE_NAME_PREFIX || &#x27;&#x27;;

const Screenshot = async () =&gt; {
 const browser = await puppeteer.launch();

 const page = await browser.newPage();

 await page.goto(url);

 await page.evaluate(() =&gt; {
 window.highlightElement(&#x27;.App-link&#x27;);
 });

 await page.screenshot({
 path: `./${fileNamePrefix} app-link.png`, 

 fullPage: true,
 });

 await page.close();

 await browser.close();
};

Screenshot();
</code></pre>With the <code>dotenv</code> package, we don&#39;t need to hardcode the URL for rendering the page, so 
execute following in your terminal: <code>URL=http://localhost:3000 node ./screenshots-generation.js</code>
<img src="/blog/app-link.png" alt="Screenshot of the CRA with highlighted link">
Background image by <a href="https://www.pinterest.com/cantinicris">Cris</a> on Pinterest: <a href="https://www.pinterest.com/pin/601019512773094141/">https://www.pinterest.com/pin/601019512773094141/</a>
<a href="https://www.flaticon.com/free-icons/screenshot" title="screenshot icons">Screenshot icons created by GOFOX - Flaticon</a>

How to autogenerate the screenshots for web application and highlight elements

<h1>How to generate sitemap for NodeJS blog</h1>
<h2>Extending the Poet functionality</h2>
Based on the existing blogging engine, named <a href="https://github.com/jsantell/poet">poet</a>, there was created a <a href="https://github.com/FallenAngel97/poet">fork</a>, and refactored to be
for the ES6+ syntax. Also, the project have been completely rewritten with TypeScript. This was done to be compatible with newer libraries and dependencies used in the solution. Also, <code>underscore</code> was replaced with native solutions, so that
poet doesn&#39;t pull additional dependencies. 
To keep poet simple, yet flexible, there was added an additional function, <code>getLinks</code>, which provides links to the tags, posts and categories in the blog. 
<pre><code class="hljs language-typescript"> getLinks(flatten: boolean) {
 const postCount = this.helpers.getPostCount();
 const posts = this.helpers.getPosts(0, postCount).map((post) =&gt; post.url);
 const tags = this.helpers.getTags().map((tag) =&gt; `/tag/${tag}`);
 const categories = this.helpers.getCategories().map((category) =&gt; `/category/${category}`);
 if(flatten) {
 return [
 ...posts,
 ...tags,
 ...categories
 ]
 }
 return { posts, tags, categories };
 }
</code></pre><h2>Creating a dynamic sitemap for the Express Blog</h2>
In your express application, add additional route, which is handling the sitemap 
generation. You need to set the header, which shows, that the output will be an xml and call a function
from poet, which will allow you to retrieve all the links in the blog.
<pre><code class="hljs language-javascript"> app.get(&#x27;/blog-sitemap.xml&#x27;, (req, res) =&gt; {
 res.setHeader(&#x27;Content-Type&#x27;, &#x27;application/xml&#x27;);
 res.render(&#x27;sitemap&#x27;, {
 baseUrl: &#x27;https://example.com&#x27;,
 posts: poet.getLinks(true),
 });
 });
</code></pre>Also, you will need some template, which will be used for the sitemap generation,
so you can fill it with something like this:
<pre><code class="hljs language-pug">doctype xml
urlset(xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot;)
 each post in posts
 - var fullUrl = baseUrl + post
 url
 loc= fullUrl
</code></pre><h2>Changes for the index sitemap</h2>
According to <a href="https://developers.google.com/search/docs/advanced/sitemaps/large-sitemaps">Google guide</a>, you can combine multiple
sitemaps into a sitemap index. This is a perfect match for the case with auto-generation of sitemap, so you can structure it like so:
<pre><code class="hljs language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;sitemapindex xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot;&gt;
 &lt;sitemap&gt;
 &lt;loc&gt;https://example.com/blog-sitemap.xml&lt;/loc&gt;
 &lt;/sitemap&gt;
 &lt;sitemap&gt;
 &lt;loc&gt;https://example.com/another-sitemap.xml&lt;/loc&gt;
 &lt;/sitemap&gt;
&lt;/sitemapindex&gt;
</code></pre>Photo by <a href="https://unsplash.com/@andrewtneel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Andrew Neel</a> on <a href="https://unsplash.com/s/photos/map?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>