156: Bluehost

Had to take a small break from my full stack project to make a landing page for a client. I built it in Local, then used the Duplicator plugin in Wordpress to deploy my website to Bluehost. This involved creating a new database and user in MySQL Database, and copying the compressed Wordpress files and PHP installation script into the public HTML folder of the website within CPANEL. With the website on Bluehost, the next step was connecting the Google Domain name to the server. This was accomplished using the custom name servers. From here all that's left is to make sure the SSL is installed properly, then configure Google captcha with the new domain name to protect the form from spam. Lastly I make sure the email forwarder within Wordpress is properly configured and test the form, and we are good to go. 

155: Docker

 Code that works on one machine does not always work on another. This can be for a variety of reasons, including the operating system and environment variables. Docker was created to solve this problem, allowing us to ship an image of our entire environment so our app can work reliably in production. Today I took my ffmpeg video compression server and containerized it with Docker. This involves creating a Dockerfile, which defined our Node 18 environment built on top of a Linux environment, along with which code to copy, commands to run, and ports to expose. From here we built and ran the image. With the image running, we used Thunder Client to send an HTTP Post request to our localhost server, and the video compressed successfully. Using the Docker CLI we were able to copy the original video into the Docker image, and then copy the compressed video out into our original folder. This is needed since the Docker image has its own filesystem. 

154: ffmpeg

 Today I wrote some code to create an Express server running services with ffmpeg. The server takes an HTTP POST request and condenses a video to a smaller resolution. When I began testing the server, I had a consistent error that I could not resolve. I added more complete error logging to the code by passing a logger object to ffmpeg. Using the data from the logger object I managed to find the source of my unsolvable error: the video I was trying to compress had an odd number of pixels in its width and could not be properly condensed to the required resolution. 

153: WSL

 Today I installed WSL. WSL allows you to run a Linux subsystem without having to deal with cumbersome virtual machines or the headache of dual booting. My current project is a full stack application, and the VSCode terminal is connected to WSL. This allows me, on my windows operating system, to effectively code in a Linux environment. Within the VSCode terminal, all the Linux commands are recognized. This creates a better development environment, in particular when using certain tools like Docker. 

152: New Startup Website

 I got contacted to build a website for a startup. I decided to build it as a single page application, built with Wordpress. I'm using Blocksy and Stackable which should help the site load fast and snappy. The site is being developed with Local, and once the local site is looking good I will deploy it to the web server using Duplicator. 

151: Calling Blockchain Functions From React

 Today I started implemented the actual web3 functionality in our app. Again, this is accomplished via the ethereum object injected into our window by Metamask. All of this logic is contained within the app context, so it can be selectively called in other components as needed. In order to create an instance of our contract, we give the ethers library our contract address, contract ABI, and signer. The signer is pulled from the ethereum window object as already mentioned, whereas the contract address and ABI must be stored somewhere in our app files. I have mine in a folder called constants, structured with export statements to provide the string of the address and JSON of the ABI wherever needed. 

150: Debugging Ethers.js

 Our app is reaching the point where it utilized the Ethers.js library to interact with the blockchain via the Web3 Provider and signer. However, there was a consistent error about how Web3Provider cannot be read and is undefined. This confused me for a while, and I wondered if there was an issue with the import statements or the way I destructured the ethereum object from the window. However, it turns out other people have had this issue and it possibly has something to do with the newest version of Ethers interacting with the newest version of React. By reinstalling the ethers package in the 5.x version, our code works again. 

149: Lifting State With Context

 All of our web3 logic is location in our Transaction Context, allowing the functions to be accessible everywhere in the app. However, in order for our frontend to interact with the blockchain, we need to read values from the form in the Welcome component and pass them to the functions in our context. How is this possible? A solution is to lift the state from the Welcome component into the context, and create an object in state that holds the values of the forms. We also create a handleChange function, that updates the form state appropriately based on which field is being modified. We can then pass this state and function via our context, to make them available to our component and connect them to the form. This way all our web3 logic can be neatly contained in our context, and the various functions can be passed accordingly and connected to forms and buttons as needed. 

148: React Context and Metamask

 Today I added Metamask integration to my app using React Context. The context wraps the entire app, allowing every component to access functions and wallet information to interface with Metamask and the Ethereum blockchain. It is important for us to wrap everything in try and catch blocks, and to include backups if the browser does not have Metamask installed. This is achieved by checking the window for the ethereum object. If this object is present, we can use the ethers library to pull the injected web3 provider and signer, and have these interact with our deployed contract given the ABI and address. The ethereum object has methods that allow us to request the eth accounts and then assign them to a state variable. The connected account is then passed as a value in the context. This allows our frontend to display the ethereum address of the connected metamask wallet.