Forem: Navdeep Singh

React Calculator Component

Navdeep Singh — Sun, 28 Feb 2021 13:18:01 +0000

Need help to review this code, written by me.

Published Isolated, Reusable - React Component 🎉🎉

Navdeep Singh — Fri, 20 Nov 2020 11:17:41 +0000

Happy to announce that I published my first Isolated & Reusable React Component on Bit.dev platform 🎉🎉🎉🎉.

Here is the link DayNightSwitcher.
Description: The accessible day-night theme switcher react component.

Already implemented on my newly developed website which crafted using Tech Stack: Gatsby & Netlify CMS https://navdeepsingh.in/

Here is the screencast.

Hope it will serve the purpose. The benefit of the loosely coupled component is that we can do testing easily and also state management can be done with a personal choice like ContextAPI, Redux, MobX, etc.

Looking for your comments!!

A11y Workshop Activities - Solution

Navdeep Singh — Mon, 27 Jul 2020 10:24:14 +0000

All the solution for the recently hosted A11y Workshop are deployed at this link

https://workshop-a11y-solution.vercel.app/

There are a total of 8 activities, go on each one by one, and use just a keyboard instead of a mouse, All activities are accessible using Keyboard and Screen-readers.

Hope you will like it & remember accessibility is for everybody.

Hosting Workshop at dream platform

Navdeep Singh — Thu, 23 Jul 2020 08:25:37 +0000

I am super excited to host a workshop based on web accessibility on my dream platform CodeNewbie in collaboration with DEV.to

Timing: 24th July: 1:00 pm UTC
Venue: Zoom Link (will be shared by organizers)
Duration: 2-3 hours

Gonna give hands-on experience on basics of web accessibility aka a11y (a-total 11 chars-y) and my participants will walk away understanding accessibility guidelines, tools, and testing.

Understand what is ARIA-* in your html5 code and what is its use and many more. Our focus in the workshop is to make web site operable i.e it can be used by assistive technologies like screen-readers and make it keyboard accessible.

Hola!!

Many many things at the workshop. See you there.

Question: Gatsby + Wordpress Deployment

Navdeep Singh — Fri, 24 Apr 2020 11:52:44 +0000

For Gatsby + Wordpress website production deployment, I have a question. Suppose I deployed Gatsby website on Netlify (Fastest to use) and Wordpress website on AWS EC2.

In production, API must be from a secure source, like from HTTPS. Either it gives warning error.

So my question is: Domain is being set up at Netlify as front end. For Wordpress API, how to install valid SSL Certificate on EC2 without DNS.

Working CSS + JS Calculator

Navdeep Singh — Tue, 04 Feb 2020 06:14:37 +0000

Love to experiments with CSS and Javascript. Created my Mac style calculator in CSS3 using Flexbox and Grid. Calculations are executed by Javascript.

Hope you liked it.

Reactjs with Laravel or Lumen or Express

Navdeep Singh — Fri, 15 Nov 2019 05:38:39 +0000

I love today’s world web technologies and thanks to various cloud platforms that allow developers to deploy their application to test and showcase, we can use any combination as per our need. Recently, I got the chance to get hands on experience in using Reactjs Library in setting up SPA and Full Stack Applications. I used Reactjs in different combinations. Hope it will give an overview to newbies.

Reactjs and Lumen Application
Reactjs and Laravel Application
Reactjs and Express Application

Reactjs and Lumen Application

Demo: https://master.d30av2lsib94wx.amplifyapp.com/
Email: admin@falcon-agency.com
Password: test123

For this I used separate folders to differentiate between front end and back end (api calls). Front end is developed using Reactjs and can be deployed in AWS Amplify ( I recommend ), or you have other options like Heroku, Netlify, Zeit and can deploy in EC2 instance of AWS. It’s truly depends on personal choice and available resources.

I love the option of Auto-deploy of application on Cloud, It auto push and deploy your changes when you git push your changes on linked git repository.

Backend application developed is basically to get API calls (REST), yet not tried GraphQL but will try it soon and its developed in slim and light php framework Lumen which is mini version of Laravel. I liked it as it provides php artisan to create containers, models, views, service providers and many many things using CLI.

This combination is best when you want separate codebase and deployment for frontend and backend.

Reactjs and Laravel Application

Demo: NA to share

This is the official project. In this case I used Laravel 5.8 as full fledged code base, by default Laravel use Blade as templating engine. But with some tweaks and alteration in code we can use Reactjs as template engine. You can use Vuejs too, as Laravel officially support Vuejs. Again it’s up-to your personal choice.

I used Admin Panel login authorization and created CMS using Laravel and for Routing Reactjs routes used separate route.

This combination is best when you are fan 🤩 of Laravel and want to use Reactjs as front end.

Reactjs and Express Application

Demo: http://falcon-digital.co/future-of-travel

This website I created for my company’s new venture which is static website but need form validation and submission to mailchimp. Again I want to use Reactjs, so to handle server side stuff rather to use php I used Nodejs.

Before :

Create HTML pages for static pages.
Create php page for server side render or handling.
Use jQuery to handle client side form submission.

After :

Create Pages in Reactjs
As Reactjs installed over nodejs, so nodejs is being used to handle server side stuff.
Reactjs to handle form submission itself.

This combination is best when you have small application which need server intervention too.

Detail Setup Explained: https://dev.to/navdeepsingh/basic-ern-stack-application-setup-3gdp

Steps to Launch new AWS EC2 Instance

Navdeep Singh — Fri, 15 Nov 2019 05:37:30 +0000

Pre-setup:

Select Ubuntu server.
Create new key pair to connect with instance securely.
After instance setup, connect with your instance
1. Open an SSH client.
2. Locate your private key file (keyname.pem). The wizard automatically detects the key you used to launch the instance.
3. Your key must not be publicly viewable for SSH to work. Use this command if needed: chmod 400 brand-nation.pem
4. Connect to your instance using its Public DNS: ec2-12-345-678-91.compute-1.amazonaws.com
5. Example: ssh -i "keyname.pem" ubuntu@ec2-12-345-678-91.compute-1.amazonaws.com

Setup:

sudo apt-get update
sudo apt-get dist-upgrade
sudo apt-get install apache2
sudo apt-get install mysql-server
sudo mysql_secure_installation utility
sudo apt-get install php libapache2-mod-php
sudo adduser ubuntu www-data
sudo chown -R www-data:www-data /var/www/html
sudo chmod -R g+rw /var/www/html
sudo mysql -u root -p
sudo a2enmod rewrite
sudo service apache2 restart
sudo nano /etc/apache2/sites-available/000-default.conf

#Below “DocumentRoot /var/www/html” add the following lines:
<Directory “/var/www/html”>
AllowOverride All
</Directory>

Common Issues:

Assign security group to instance, so TCP, HTTP works
Listing Directory Failed: Connect FTP via SFTP
MYSQL permission issues (https://support.rackspace.com/how-to/installing-mysql-server-on-ubuntu/)
Mysql extension is missing in php7 installation. Ubuntu 16.04 (sudo apt-get install php-mysql)

Start server and test:

sudo service httpd start
sudo service mysqld start
chkconfig --list httpd

Basic ERN Stack Application Setup

Navdeep Singh — Fri, 15 Nov 2019 05:37:01 +0000

ERN Stack Application is without (M)Mongo, as I haven't database need in this app. This is very interesting setup for a front end developer who mostly crafted websites in HTML5, CSS3 and Vanilla Javascript or jQuery and deployed websites via FTP on Apache Server.

Here I used Express for handling server requests. Reactjs to develop front end using Components, Hooks, JSX, State Management i.e No need to use jquery to handle client side and server side tasks. And base layer is Nodejs (V8 Chrome Engine) is being used to make possible to execute javascript code on command line.

1. First start with React ready to go npm module `create-react-app`

npx create-react-app ern-app
cd ern-app
npm install

2. Start developing for front end after this command

npm start

3. Install Express server

npm install express --save

4. Setup Express server

const express = require('express')
const dotenv = require('dotenv');
const cors = require("cors");
const app = express();
const bodyParser = require("body-parser");
const path = require('path');
const axios = require('axios');
dotenv.config();

//Here we are configuring express to use body-parser as middle-ware.
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());

// Static Routes
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'home.html'));
});

// React Routes
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', function (req, res, next) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const port = process.env.SERVER_PORT || 8080;

5. Start Express Server

node server

6. Production

Setup nodemon or my favorite one pm2 on server using this command npm install pm2 -g followed by pm2 start server.js And after check status of server by pm2 show server
Preview:

Always run React build command on server to get optimised version of your React app.

npm run build

Feel free to contact if you need any help regarding this setup 🤗