<section style="background: sampleBackgroundToChange" class="headSection"><h1 class="title colorWhite">Create a GIT check in the ReactJS APP</h1>&nbsp;2022-07-30</section><div class="contentWrap" style="text-align: justify;"><section class="articleContent">In this article, we will create a GIT check for the react.js app to ensure our build is working correctly. During the development, it's a common situation when someone commits the code and doesn't check if his code is building. Because when we are running our app using command<pre class="language-poweshell"><code>yarn start</code></pre>or<pre class="language-shell"><code>yarn dev</code></pre>or a similar one. The code will work, and you could skip the errors. But when you try to build the code using&nbsp;<pre class="language-git"><code>yarn build</code></pre>the code could fail. To avoid that situation we could use GIT checks. GIT check will be run automatically once someone commits and pushes (to the branch we specified) or create a Pull Request (PR) to this branch.<ol><li>Create a folder in your root folder called ".github" and create the folder inside called "workflows".&nbsp;</li><li>Create a new file called "build-check.yml". The structure will look like this:<img style="display: block; margin-left: auto; margin-right: auto;" title="build-check-structure.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fbuild-check-structure.png?alt=media&amp;token=7bbb4385-bbc9-492c-81e1-06d74710c1ee" alt="file for git check" width="270" height="300"></li><li>Paste this code to the "build-check.yml" file we just created:</li></ol><pre class="language-yml"><code>name: Build Checkon: push: branches: [master, develop] pull_request: branches: [master, develop]jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [16.x] steps: - uses: actions/checkout@v2 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - run: yarn - run: yarn build</code></pre>in this step, we created a GIT check for the master and develop branches. Every time someone pushes or creates a Pull Request to master or develop these 2 commands will be run automatically for our changes:<pre class="language-javascript"><code>yarn yarn build</code></pre>If you commit to the specified branch you will be able to see the status of the GIT check in the GitHub actions tab<img style="display: block; margin-left: auto; margin-right: auto;" title="actions-build-check.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Factions-build-check.png?alt=media&amp;token=e358af9a-45cb-49c7-8938-61214fa56449" alt="GitHub action build check" width="806" height="153">or if it was a PR you can see in the PR tab your GitHub repo<img style="display: block; margin-left: auto; margin-right: auto;" title="pull-request-check.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fpull-request-check.png?alt=media&amp;token=b090a3c3-686f-43f3-8269-ff9e79b8cd33" alt="Pull Request build check" width="806" height="149">By doing this small thing of creation GIT check you will keep time during the development and everyone who will be checking the PR will be sure that you didn't destroy the build and it won't fail during the production deployment.You can create other types of GIT checks for eslint, prettier, etc. We believe it will be useful for you.&nbsp;&nbsp;</section></div>

Create a GIT check in the ReactJS APP

<section class="headSection" ><h1 class="title colorWhite">Deploy React app to Heroku using CircleCI</h1>&nbsp;2022-08-03</section><div class="contentWrap"><section class="articleContent">In this article, we will deploy React app to Heroku and create CI/CD pipeline to deploy the changes automatically once you changed the code and pushed it to GIT.Before we start you need to do a few steps (if you didn&rsquo;t do it before):<ul><li>Create <a class="customised-link" href="https://github.com/" target="_blank" rel="noopener">GitHub</a> and <a class="customised-link" href="https://www.heroku.com/" target="_blank" rel="noopener">Heroku</a> accounts if you do not have either already.</li><li>Create a <a class="customised-link" href="https://circleci.com/" target="_blank" rel="noopener">CircleCI</a> account by sing UP using the GitHub account you created in the previous step.</li></ul><h2 style="text-align: center;">What are CircleCI and Heroku?</h2>Heroku is a cloud hosting service. We will host our application on Heroku and we&rsquo;ll configure CircleCI to deploy our application automatically to our Heroku URL once we changed the code and pushed it to the GitHub repo.CircleCI is a CI/CD service that can be integrated into your repository (GitHub, GitHub Enterprise, or Bitbucket). Once you have changes in your repo, it creates and runs a pipeline that you create in a config.yml file. CircleCI is free for open-source projects (including projects that are public on GitHub).<h2 style="text-align: center;">Setting up the React application</h2>Create react app if you didn&rsquo;t do it before<pre class="language-javascript"><code>npx create-react-app my-appnpm installnpm start</code></pre>You should be able to see the website running in your browser on port 3000 (if available). It means that everything is fine. Now we need to stop the app by pressing the ctrl+any key or delete the console if you are using VS Code in MacOS.<h2 style="text-align: center;">Setting up your Heroku hosting environment</h2>You will need to install the Heroku CLI globally if you haven&rsquo;t yet &nbsp;by running the command:<pre class="language-javascript"><code>npm i -g heroku</code></pre>Then log in to Heroku via the command line (which will open a browser window) by running the following command:<pre class="language-javascript"><code>heroku login</code></pre>We can deploy our React app by using a buildpack. <a class="customised-link" href="https://www.heroku.com/elements/buildpackshttps://www.heroku.com/elements/buildpacks" target="_blank" rel="noopener">Buildpacks</a> are a set of scripts that are used for compiling apps on Heroku. They make deployment easier and are usually open-source. For our React app, we&rsquo;ll be using a buildpack for <a class="customised-link" href="https://github.com/mars/create-react-app-buildpack">create-react-app</a>.Our next step is to create a Heroku application via the command line using our buildpack with this command (change $APP_NAME to your preferred app name):<pre class="language-javascript"><code>heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git</code></pre><h2 style="text-align: center;">Push your GIT repo</h2><pre class="language-javascript"><code>git add .git commit -m 'commit message here'</code></pre>If you&rsquo;re currently on the master branch, you can push to Heroku directly using:<pre class="language-javascript"><code>git push heroku master</code></pre>Now you can visit your Heroku account, and see your react app we just created and pushed.<h2 style="text-align: center;">Configure CI/CD in React with CircleCI</h2>First of all, log in to <a class="customised-link" href="https://circleci.com/vcs-authorize/">CircleCI</a> with your GitHub profile.<img style="display: block; margin-left: auto; margin-right: auto;" title="circle-ci-login.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fcircle-ci-login.png?alt=media&amp;token=10878590-61e4-4da0-882e-588b1e52bde9" alt="CircleCI deploy react app" width="300" height="233">Select a GIT repo you just pushed to and press on "Setup project" button<img style="display: block; margin-left: auto; margin-right: auto;" title="setup-circleci.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fsetup-circleci.png?alt=media&amp;token=06483908-f25b-4f96-87db-1e569c64439c" alt="Setup CircleCI" width="300" height="86">Select the latest option to&nbsp;<img style="display: block; margin-left: auto; margin-right: auto;" title="select-circleci-file.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fselect-circleci-file.png?alt=media&amp;token=956fec96-87ea-4629-8c83-f5249b4ee362" alt="Setup CircleCI config file" width="300" height="185">Paste this code into the editor:<pre class="language-yml"><code>version: 2.1orbs: heroku: circleci/heroku@0.0.10jobs: build: docker: - image: circleci/node:10.16.3 working_directory: ~/repo steps: - checkout # install dependencies - run: name: Install Dependencies command: npm installworkflows: heroku_deploy: jobs: - build - heroku/deploy-via-git: # Use the pre-configured job, deploy-via-git requires: - build filters: branches: only: main</code></pre>And press "Commit and run"<img style="display: block; margin-left: auto; margin-right: auto;" title="circleci-yaml-file.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fcircleci-yaml-file.png?alt=media&amp;token=927266d7-065a-4670-804d-42df8f67e430" alt="CircleCI yaml file" width="688" height="377">Now we need to go back to the projects page and go to the settings of our project&nbsp; &nbsp; &nbsp; <img style="display: block; margin-left: auto; margin-right: auto;" title="circleci-projects.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fcircleci-projects.png?alt=media&amp;token=db12e2d1-de19-4ed8-a13a-67f51ca0d9cd" alt="CircleCI projects" width="322" height="327">&nbsp;<img style="display: block; margin-left: auto; margin-right: auto;" title="circleci-project-settings.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fcircleci-project-settings.png?alt=media&amp;token=46028de1-6f01-45d4-b3b8-05fee5ba7694" alt="CircleCI project settings" width="377" height="209">And you need to add Environment Variables.&nbsp;<img style="display: block; margin-left: auto; margin-right: auto;" title="add-enviroment-variables-to-circleci.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fadd-enviroment-variables-to-circleci.png?alt=media&amp;token=33a3b62f-73cf-4768-941e-772995297793" alt="Add enviroment variables to CircleCI" width="846" height="247">HEROKU_API_KEY&nbsp;you can find it on the <a class="customised-link" href="https://dashboard.heroku.com/account">account settings</a> page<img style="display: block; margin-left: auto; margin-right: auto;" title="heroku-api-key.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fheroku-api-key.png?alt=media&amp;token=f949971e-1a61-4098-aa3e-8299ed713bed" alt="Heroku api key" width="852" height="104">HEROKU_APP_NAME is the name of your Heroku application (the one you created using a buildpack.That's it, now every time you push or create a pull request to the main branch it will be deployed to Heroku.&nbsp;&nbsp;&nbsp;</section></div>

Deploy React app to Heroku using CircleCI

<section class="headSection" style="background: sampleBackgroundToChange;">
<h1 class="title colorWhite">How to Generate Sitemap For Static And Dynamic Pages with Next.js</h1>
&nbsp;
2022-08-15
</section>
<div class="contentWrap">
<section class="articleContent">
<h2 style="text-align: center;">Why does the Sitemap matter?</h2>
If your website is SEO-friendly, you should definitely have a Sitemap. Google uses a Sitemap to detect your pages, knowing the frequency of updating your content on that pages and their priority. Also, if you have a sitemap it's easy to send it to <a class="customised-link" href="https://search.google.com/" target="_blank" rel="noopener">Google Search Console</a> to detect new and updated pages. We will be using <a class="customised-link" href="https://www.npmjs.com/package/next-sitemap" target="_blank" rel="noopener">next-sitemap</a> package to create the Sitemap.
<h2 style="text-align: center;">Generate a sitemap for static pages</h2>
We consider that you already know how to create the next.js app.
1. Install <a class="customised-link" href="https://www.npmjs.com/package/next-sitemap" target="_blank" rel="noopener">next-sitemap</a> using the following command:&nbsp;
<pre class="language-poweshell"><code>yarn add next-sitemap</code></pre>
2. Add your domain to the .env config file
<pre class="language-javascript"><code>NEXT_PUBLIC_DOMAIN_URL=https//yourwebsite.com/</code></pre>
3. Create a new file called "next-sitemap.config.js" in the root folder of your app
<img style="display: block; margin-left: auto; margin-right: auto;" title="next-sitemap-config.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fnext-sitemap-config.png?alt=media&amp;token=8fb22c3b-f87b-4974-a4ca-00471725e0b0" alt="sitemap config in the next.js app" width="300" height="309">
4. Paste the following code to the next-sitemap.config.js file you just created
<pre class="language-javascript"><code>/** @type {import('next-sitemap').IConfig} */
const config = {
	siteUrl: process.env.NEXT_PUBLIC_DOMAIN_URL,
	exclude: ['/404', '/someAdminPages'],
	generateRobotsTxt: true,
	outDir: './out',
	changefreq: 'monthly',
	robotsTxtOptions: {
		policies: [
			{
				userAgent: '*',
				disallow: ['/404', '/someAdminPages'],
			},
			{ userAgent: '*', allow: '/' },
		],
	},
};

module.exports = config;</code></pre>
<ul>
<li>siteUrl - URL we added in 2 step</li>
<li>exclude - add the pages you don't need to be detected by Google Robots and available in the Google Search</li>
<li>generateRobotsTxt - we need it along with Sitemap to be SEO friendly</li>
<li>outDir - specify the folder Sitemap will created after the build your project</li>
<li>changefreq - tell Google Robots how often you are updating your content (&ldquo;never&rdquo;, &ldquo;yearly&rdquo;, &ldquo;monthly&rdquo;, &ldquo;weekly&rdquo;, &ldquo;daily&rdquo;, &ldquo;hourly&rdquo;, &ldquo;always&rdquo;)</li>
<li>robotsTxtOptions/disallow - we need to add paged you that don't need to be touched by Google Robots</li>
</ul>
5. Add a Sitemap generation command to your package.json file into the build action
<img style="display: block; margin-left: auto; margin-right: auto;" title="sitemap-command.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fsitemap-command.png?alt=media&amp;token=41fe9b66-4725-4860-b8b2-b530e199a66a" alt="Add Sitemap creating to the package.json config" width="550" height="197">
Now if we run
<pre class="language-poweshell"><code>yarn
yarn build</code></pre>
We will have our Sitemap in the "out" folder created for Static Pages. Probably you will have sitemap.xml and sitemap-{n}.xml files
<img style="display: block; margin-left: auto; margin-right: auto;" title="sitemap-example.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fsitemap-example.png?alt=media&amp;token=19df5ef1-74aa-463d-9eb0-48d8b9e40593" alt="Sitemap.xml example" width="550" height="114">
<h2 style="text-align: center;">Generate a Sitemap for dynamic pages</h2>
To be able to generate a Sitemap for dynamic pages we will need to add "get static path" and "get static props" on the dynamic page [id]:
<pre class="language-javascript"><code>export async function getStaticProps({ params }) {
	let postId = params.id;
	const post = await getPostById(postId);

	return {
		props: {
			postItem: post || null,
		},
		revalidate: 10,
	};
}

export async function getStaticPaths() {
	const posts = await getPosts();
	let paths = [];
	posts.forEach((item) =&gt; {
		paths.push({
			params: {
				id: item.id,
			},
		});
	});


	return {
		paths,
		fallback: 'blocking',
	};
}</code></pre>
After adding this and building the project by the following command
<pre class="language-poweshell"><code>yarn build</code></pre>
You will have your dynamic pages in the sitemap.xml file
<img style="display: block; margin-left: auto; margin-right: auto;" title="sitemap-dynamic-pages.png" src="https://firebasestorage.googleapis.com/v0/b/flysoft-f2d28.appspot.com/o/images%2Fsitemap-dynamic-pages.png?alt=media&amp;token=8f3a8638-5e44-4b42-82fd-b141122bd79f" alt="Next.js Sitemap with dynamic pages" width="600" height="146">
We hope, this will help you to improve your SEO and enjoy getting more visitors to your website!
Check our <a class="customised-link" href="https://flysoft-tech.com/services/">IT Consulting Services</a> page to see which solutions could be useful for you.
&nbsp;
</section>
<section class="articleContent">
<h2 class="title">&nbsp;</h2>
</section>
</div>

Generate sitemap for dynamic and static pages in the next.js/react app

Blog

A home for inspiring stories on business and technology.

Learn about business and technology from our monthly newsletter!