Ninja Space Content Blog

Since Heroku does not keep my uploaded files from the deployed link after a day, I had to find a solution to this. Because their file system is ephemeral, which I learned the hard way, I had to find a cloud service that would store my uploaded photos. Read more from Heroku on what it means to be ephemeral and their suggestions on how to store uploaded files.

After googling online for suggestions, I went with a free plan with Cloudinary. Their Node.js SDK documentation is very thorough.  You can find specific documentation utilizing Node for Cloudinary with the following link: https://cloudinary.com/documentation/node_integration, which I used as a reference multiple times. 

I really like Cloudinary's editing features. Once you create an account and have uploaded some photos, you can edit and use their filter effects, quickly crop and use other developer tools.

There are a few other Cloudinary plans that are upgraded versions of the free plan. As of right now, I don't foresee using more than the limit of the free plan. However, I saw that Heroku does suggest using S3 for storing photos in their own docs but I really think that AWS' documentation can be so confusing to weed through, at least for me it is. Once I've successfully learned to use AWS' services, I'll definitely write a blog entry about it.

After weeding through a bunch of forums and blogs about Multer and Cloudinary used together, this particular blog entry from another developer really helped me out so I wanted to share it here. It's a spot-on implementation resource for Cloudinary using Node, Express and Multer:
https://dev.to/itsmefarhan/cloudinary-files-images-crud-operations-with-nodejs-express-multer-2147

Read about my suggested resources for using Multer on this blog entry.

This month, I learned to used Multer for a react project that I've been working on. It took me close to 6 days to get both the back-end and front end to work for Multer. There were times when I really struggled but in the end, I didn't give up and it's so rewarding to finally figured it out. Being able to upload a file successfully, especially a photo, and have it save to the database was something I was thinking about learning to do since December. 

Many of the errors I had at the beginning were mainly missing the little stuff, like forgetting to deploy the latest changes to my server or having a syntax error.

Here are three resources that I've found really useful for my first implementation with Multer:

• https://blog.stvmlbrn.com/2017/12/17/upload-files-using-react-to-node-express-server.html (Setting up back-end and front-end)
• https://www.npmjs.com/package/multer-js (main documentation for node using Multer) (Main Doc)
• https://www.youtube.com/watch?v=srPXMt1Q0nY (Video on setting up on the back-end)

It took some heavy studying for me to finally get it to work but now I can use Multer for all of my future projects that require file uploading from now on

Note:
Remember to use axios to call to Multer, not fetch.

I started learning JavaScript in July 2020 and had been using strictly CSS to style my own apps but I've decided to take a stab at bootstrap with React Bootstrap. There's a learning curve and at first, I thought, it'd just be faster if I style all of this myself with CSS. However, I know that in a lot of job descriptions, bootstrap comes up in the tech stack as a preferred skill to have. After working with it, I realized, it could save me a lot of time making sure everything is formatted correctly if I am focusing on just functionality. Here's what I learned and some tips from my personal development.

Things to make sure not to miss when utilizing React Bootstrap for my App were the following:

1. Add

   import 'bootstrap/dist/css/bootstrap.min.css';

   to my main index.js of my src folder.
2. Then, import the individual components in the files that I am utilizing the React Bootstrap for. For instance, if I am using the Form component and the Button within that Form, I would need to import both Form and Button. Just importing Form will throw an error if you're also utilizing the Button as well inside of it. To show an example, these are what I imported at the top:

   import Button from 'react-bootstrap/Button';
   import Form from 'react-bootstrap/Form';

3. Instead of using the Nav feature, using an Accordion is a good option. To read more about the Accordion component you can use from React Bootstrap, go to: https://react-bootstrap.github.io/components/accordion/
4. I really like using the Carousel component from React Boostrap. It is so easy to use and makes it easy to add something interactive that makes the design of your page more exciting. See Carousel options here: https://react-bootstrap.github.io/components/carousel/

After you're set up and ready to implement whichever code you're interested in within the list of react bootstrap components, take note of the variants as this will allow you to utilized their existing list of styles. As default, the buttons are blue but you can change this if you input the appropriate variant you'd like to use.

I'm currently working on building a postgres database for a new project and wanted to get what I have so far deployed on Heroku. Something has changed since I've last deployed a database(db) project on Heroku, which was only 2 months ago!

When I tried to seed my data on Heroku after doing a git push, I kept getting this error in my terminal "UnhandledPromiseRejectionWarning: error: no pg_hba.conf entry for host"..."SSL off". This was an error that I've never encountered before.

After a quick Google, I found that someone also had the same issue on stack overflow. It's definitely related to ssl. See more on the stack overflow link. Since I am working with node, I've found the Heroku documentation regarding this and it was very thorough. See Heroku's main resource on postgres ssl issue: https://devcenter.heroku.com/articles/heroku-postgresql#heroku-postgres-ssl.

If you're also working on a postgres database with node. Here's the exact thing I had to model after below:

const { Client } = require('pg');

const client = new Client({
 connectionString: process.env.DATABASE_URL,
 ssl: {
 rejectUnauthorized: false
 }
});

client.connect();

Note that this is the code you will need to deploy with for Heroku only. For development, make sure the connection string is set locally. It will cause errors when you use the model code above for developing but don't worry, use the snippet for Heroku deployment. The key thing is for deployment, you need to add the ssl: {rejectUnauthorized: false} for Heroku. After I've deployed on Heroku, I ran my seed data and saw that my seed data was successfully shown on my deployed link. I commented out the model snippet and then, just have my connection string to my localhost again while I'm developing. I hope this helps you!

I recently deployed one of my websites on Godaddy's shared web hosting and decided to use one of their third party integrations called Installatron that's under their Cpanel. It has been a nightmare to get it working, even though it seems like the easiest thing to integrate.

I have talked to over 5 different tech support reps from Godaddy via their chat tool and it seems like the chat gets timed out or something because like every 30 or 45 minutes, I get a new tech support person. It's a pain and it's like I'm stuck in a loop. First, they said I have to use an email address that is linked to the domain so I did that. Then, they said, I should try using a different email address and I tried that. And then, they said they have limited resources to integrating this tech because it's a third party. If it is this difficult to figure out, I really think they shouldn't list Installatron as a solution under their Cpanel. 

After a few weeks of not getting this figured out because the last Godaddy tech support person totally ghosted me, today, I've decided to give up completely. I uninstalled it and feel relieved.

I suggest finding another way to create a Contact Us form. I ended up using a Node library called Nodemailer.