DEV Community: Abhishek Prasad

Setup CSS modules in POSTCSS

Abhishek Prasad — Thu, 07 Nov 2019 10:21:33 +0000

So I was trying to include the modular way of styling sass in my project. Just cuz I feel that it's a convenience for me, no leakage of styles. No strong opinions about it. Initially, I was under the impression that the tech stack that the framework that I was using allowed it i.e. ParcelJS.

Bear with me as I don't have much idea and I just put stuff in place. Now ParcelJS use PostCSS.

Trying to deploy stuff on AWS

Abhishek Prasad — Tue, 08 Oct 2019 10:58:28 +0000

All that I did last time was write up tests and fix CI.. But now what next? How do I CD the damn thing. I literally have no idea, so hopefully by the end of this blog I do.
Things that I know at the moment...

I need a domain name
I need to deploy a react app on AWS

AWS, sponsor me if we are successful please. Well, no one would listen anyway. Onto the research and stuff...

Signing up for AWS??

Ummmmm obviously...

waiting for verification code
IAM? and all that?

Now what..

That was a really long break. I have so much food in me, I cant type.

Okay so went ahead with AWS Amplify. Looked simple enough and my previous CI stuff makes a bit more sense when I read this. Hoping it would not cause an issue.

AAHHH SHIT

Okay let me investigate!

Okay so maybe I did not build the app. I guess, I have to configure that in parcel. Well, let's see how to do that.

"scripts": {
    "test": "jest --config=jest.config.json",
    "start": "parcel index.html",
    "build": "parcel build index.html"
  }

This may not be easy... Because I see that there are a lot of building patterns in the parcel CLI section.

Merged the branch which has all the new styles into the master..
I fear that I am not utilizing the build power of parcel.

I feel like I should try and see if I can write my own build file in my codebase.

Let's try the npm install -g @aws-amplify/cli way.

Well I get command not found: amplify. Stuck!

The yarn stuff

Maybe I should run yarn again after removing the node_modules.

Same failure..

HMMMMMMMMMM

So I added a pre-build section to the build config.
It seems that after the build the config file cant find the base folder.

WHAT THE HECK!!!

So it seems like the build.yml file for Amplify works differently to other platforms.
Usually what happens is.

Deployment failing.. WHAT IS GOING ON!!! WHY ARE THINGS NOT SIMPLE!
They could have provided a better log record. Gaah!

I bought a domain now, so, we should see a basic website by the end of this.. if we get there though.

So it's one day later..
I am still trying to think about it. I think I shall try the good old s3 bucket stuff that I see that my company does.

https://youtu.be/RQdxHi4_Pvc (stumbling onto cool youtube video, spending 3-4 hours on youtube
)

https://open.spotify.com/album/3a3AA8QEvjP7onsoz3jaqc?si=VZYHjHJVTFmqrIr-rzSo3A

Created a S3 bucket --> Setup Permission policy --> A lot of aws stuff and phew

Got it running! But now I want to have my domain name which I bought, route here. Hmmmm Looks like there is not a simple setting to setup the thing which I want to do(I dont know the jargon used for what I am trying to do, I'm dumb okay?!).

Research tell me that I have to create a cloudfront distribution. Let's do it.

Waiting... waiting... waiting ... AHA Deployed!!

Now I have to create something in Route53 from aws, which shall enable me to link my domain name and the hosted content in cloudfront.

My source tells me that it would need 48 hours to have the website deployed.

So if everything works out, Ya'll should be able to see something on https://mentorfix.org/ . Obviously nothing works at the moment, but I wish to work on in more eventually.

Let me know in the comments if you find something that I should have done to lessen my time spent on deployments and I will try and do that. Or maybe, you can make that contribution to the org if you wish to.

Thank you so much for bearing with me, I know this blogpost is not as conclusive as the last one. But I will improve eventually.

Until then..

PS: Fave is hiring, checkout our career page!

PPS: This link was a massive help, do check it out.

Testing issues as usual...

Abhishek Prasad — Sat, 03 Aug 2019 13:11:06 +0000

Having gone through setting up CI/CD for my schmol project, I realized that TDD is a pretty darn cool thing to have and it helps to automate stuff and also gives confidence not just to the coder but also to the reviewer.

Having said that, I had implemented Jest and Enzyme to set up the tests. Now as a developer I am really interested in knowing more about testing. The company which I work for, Fave (We are hiring, link at the end of this post), focuses a lot of TDD and I see where and why is it needed.

So obviously I had to go with the most popular option, Jest paired with enzyme. I still don't have any idea why did I go with that. But hey, after a damn long setup...

GOSH DARN AWESOME! 😱

I was really happy until I refactored my code right now. And ran into this bad boy.

So apparently Jest cant deal with importing images.

When you import image files, Jest tries to interpret the binary codes of the images as .js, hence runs into errors.

Did some research, found out that there is something called moduleNameMapper, that needs to be configured for things to work out.

ummmmmmmmmmm looks like too much work... NETFLIX BREAK!

2 episodes later

Alright! Let's do this!

As I already had a jest.config.json for setting up polyfills for tests and also to set up the enzyme adapter(I don't know why, but it wasn't working otherwise).

All I had to do was add

"moduleNameMapper": {
        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
    }

Now comes to mocking the files. Created them with a simple
exports default '';...

"moduleNameMapper": {
        "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        "\\.(css|scss)$": "<rootDir>//__mocks__/fileMock.js"
    }

Freakin SCSS... Alright, let's try it again.

This feeling right here...

Is why I am a developer.

You can check out my itsy bitsy org at https://github.com/WrippleFoss/
We are trying to build an open-source platform for something 😉 secret.
You can also join the discord channel using this link.

Fave is hiring, apply to https://careers.myfave.com/

Until next time...