[WIP]: template-next

[kaf-lamed-beyt]

Hi @DeveloperAspire, kindly take a look at my change.

What is the default command that will make people able to install the Next.js template with swifty-config. I also noticed an index.js file in the root folder. What do I need to do in it, so that the command is extended from it.

[DeveloperAspire]

@kaf-lamed-beyt Hey Chief! Great work! Amazing stuff you have done.

I will review this as soon as I get home and make comments when needed.

However, for the command, I think you will understand it better when you try and run the Swifty Config locally and you will see how it works.

run yarn create swifty-config to see how it all comes together.

if it still not clear, we can have a call for me to explain better

Great job so far!

[kaf-lamed-beyt]

Thank you for the opportunity, chief!

---

I will review this as soon as I get home and make comments when needed.

I'll be on the lookout for this, thanks! 😃

---

I'll also look at the config, by running the command, when I'm chanced. And please accept my apologies for being slow about this 🙏🏼

[kaf-lamed-beyt]

Made a mistake with my last commit message 🤣

@DeveloperAspire, kindly review

[DeveloperAspire]

@kaf-lamed-beyt I apologize that I haven’t reviewed this or given you feedback, please bear with me. I have a lot of activity taking up my time. When I settle I will review and drop comments where necessary.

Thank you for the good work. I am grateful!

[kaf-lamed-beyt]

Ah! It's nothing! I understand 👍

Do take a look at the new issue I created BTW #3

[DeveloperAspire]

Hi @DeveloperAspire, kindly take a look at my change.

What is the default command that will make people able to install the Next.js template with swifty-config. I also noticed an index.js file in the root folder. What do I need to do in it, so that the command is extended from it.

Hey @kaf-lamed-beyt So for the default command. What are you thinking it should be? You know that NextJS already has it's own command. Personally I don't think people will trust a random package command more than the command given by the package itself.

If you have an idea how this can be done, I will really apperciate if you do.

[DeveloperAspire]

Ah! It's nothing! I understand +1

Do take a look at the new issue I created BTW #3

Thanks for for understanding. Yes I have seen the issue. Thank you for the good work.

[DeveloperAspire]

Made a mistake with my last commit message rofl

@DeveloperAspire, kindly review

Hey, @kaf-lamed-beyt Thank you for all your hard work on this. I am delighted!. Your PR is neat.

Here are some reviews I think will make your work better so we can merge it.

First I will like to explain what Swifty Config actually those, NextJS and React, and Vue all have their default commands developers can use to get started. But here is the thing. Let's say you are in a hackathon and you need to set up a project fast, you know stuff like Vite and CRA will just give you a bare-bone project folder, You might need SCSS, Tailwind CSS, Chakra UI, and Redux.

The stress of setting up all those stuff can be pretty cumbersome. My goal for Swifty Config (Which has become your goal too) is to project a command that lets you spin up the template that has these basic configurations. In the future, we would have templates for Redux, Chakra UI, TailwindCSS, Redux etc. So that people can forget the hard part of configurations and start building immediately.

Note: If you have more ideas on how this can be done, do share.

That being said. The NextJS template PR is lacking a few things I would be pleased you added.

• Eslint config (Check the existing templates and copy and paste them)
• SCSS ( This is the default styling, we can create another styling template with Tailwind CSS)
• Stylint (Check the existing templates and copy and paste them)

Then the home page style. It will be cool if the home page styles have the same look. You can copy and paste the styling for this. Here is how it should look:

Also in your readme, kindly update it to include the next-ts and next-js since we have 2 variant for NextJS

I believe this is all that is needed and we are good to go.!

Thank you for lending a hand to work on this project. I am so glad you are!

Looking forward to seeing your next comment!

[kaf-lamed-beyt]

Hey @kaf-lamed-beyt So for the default command. What are you thinking it should be? You know that NextJS already has it's own command. Personally I don't think people will trust a random package command more than the command given by the package itself.

I think the default command is create-swifty-config [app-name], yeah? Or do you mean the default config for each template, such that people can be able to do something like this? 👇🏼

csc next-ts || react-ts || vanilla-ts

Where csc is short for create-swifty-config?

[kaf-lamed-beyt]

And overall, this is just too awesome of a feedback! Thanks for this mehnn! 😄

[kaf-lamed-beyt]

The stress of setting up all those stuff can be pretty cumbersome. My goal for Swifty Config (Which has become your goal too) is to project a command that lets you spin up the template that has these basic configurations. In the future, we would have templates for Redux, Chakra UI, TailwindCSS, Redux etc. So that people can forget the hard part of configurations and start building immediately.

This idea sounds incredible, tbh!

So, all in all now, what this project encompasses is the ability to provide a ready-to-use config for people to use any day, anytime, with some of the stylings too, yeah?

[kaf-lamed-beyt]

That being said. The NextJS template PR is lacking a few things I would be pleased you added. Eslint config (Check the existing templates and copy and paste them) Stylint (Check the existing templates and copy and paste them)

Okay... while this actually sounds good. I think we should add an option for people to decide if they want to have these linters in their projects. I personally do not like them, and I think there may be a few other folks who are like me too, who wouldn't like them.

So I'm suggesting that we make it optional. If accepted, I can create a PR for this, as we progress.

For now, I'll go and modify the homepage to conform with the styles you've already written, and I'll also modify the README file.

cc: @DeveloperAspire

[kaf-lamed-beyt]

I'm having an issue with replacing the styles though. I tried copying all the content in the styles folder from the react template, and I placed it inside the next template. One of the issues I faced was the fact that the font was not being applied, and the background color itself isn't being applied.

I had to apply an arbitrary bg color to the component, and this is what I am seeing. 😄

[DeveloperAspire]

I'm having an issue with replacing the styles though. I tried copying all the content in the styles folder from the react template, and I placed it inside the next template. One of the issues I faced was the fact that the font was not being applied, and the background color itself isn't being applied.

I had to apply an arbitrary bg color to the component, and this is what I am seeing. 😄

Did you install SCSS?

[DeveloperAspire]

The stress of setting up all those stuff can be pretty cumbersome. My goal for Swifty Config (Which has become your goal too) is to project a command that lets you spin up the template that has these basic configurations. In the future, we would have templates for Redux, Chakra UI, TailwindCSS, Redux etc. So that people can forget the hard part of configurations and start building immediately.

This idea sounds incredible, tbh!

So, all in all now, what this project encompasses is the ability to provide a ready-to-use config for people to use any day, anytime, with some of the stylings too, yeah?

Yes exactly!

[DeveloperAspire]

That being said. The NextJS template PR is lacking a few things I would be pleased you added. Eslint config (Check the existing templates and copy and paste them) Stylint (Check the existing templates and copy and paste them)

Okay... while this actually sounds good. I think we should add an option for people to decide if they want to have these linters in their projects. I personally do not like them, and I think there may be a few other folks who are like me too, who wouldn't like them.

So I'm suggesting that we make it optional. If accepted, I can create a PR for this, as we progress.

For now, I'll go and modify the homepage to conform with the styles you've already written, and I'll also modify the README file.

cc: @DeveloperAspire

Yes! This is part of the goal! To make it optional! Please do create an issue for it.

[kaf-lamed-beyt]

Did you install SCSS?

Oh! Yeah. I think I may have installed the wrong one... I did 👇🏽

npm install node-sass 

Are they somewhat different?

[kaf-lamed-beyt]

Yes! This is part of the goal! To make it optional! Please do create an issue for it.

Awesome! I'll do that now and mention you!

[DeveloperAspire]

Did you install SCSS?

Oh! Yeah. I think I may have installed the wrong one... I did 👇🏽

npm install node-sass 

Are they somewhat different?

Yeah, I think they are different.

Try: npm install sass.

Also check if you imported the files properly. See how it is done in the other templates. Something must be off somewhere, you know how these things can be 😂

[kaf-lamed-beyt]

Sorry for circling back soo late. I'll definitely give it a go, and get back to you 😃

[DeveloperAspire]

Sorry for circling back soo late. I'll definitely give it a go, and get back to you 😃

@kaf-lamed-beyt Hey Chief, How is it going? Any progress? How you doing man? Sent you a message on Twitter.

[kaf-lamed-beyt]

Chief!!! I am so sorry. I completely forgot. I was carried away with the current yarnings in the nation and some of my backlog of work ☹️

[kaf-lamed-beyt]

Hi @DeveloperAspire

I tried npm install sass and I'm still getting the same thing.

I even tried changing the way the styles are being used in _app.js Formerly, yours was like this 👇🏼

import React from "react";
import styles from "../styles/app.module.scss";

export default function Home() {
  return (
    <div className={styles["container"]}>
      <div className={styles["container__content"]}>
        <h1 className={styles["container__heading"]}>⚡️ Swifty Config</h1>
        <p className={styles["container__text"]}>
          A Frontend project configuration tool 🛠️.
        </p>
        <p className={styles["container__text"]}>
          With one command, setup your Frontend project with additional
          configuration out of the box.
        </p>
      </div>
    </div>
  );
}

So I changed it to this 👇🏼, and I'm still having this blank screen.

import React from "react";
import styles from "../styles/app.module.scss";

export default function Home() {
  return (
    <div className={styles.container}>
      <div className={styles.container__content}>
        <h1 className={styles.container__heading}>⚡️ Swifty Config</h1>
        <p className={styles.container__text}>
          A Frontend project configuration tool 🛠️.
        </p>
        <p className={styles.container__text}>
          With one command, setup your Frontend project with additional
          configuration out of the box.
        </p>
      </div>
    </div>
  );
}

[DeveloperAspire]

@kaf-lamed-beyt Hey Chief, sorry for the stress in all this. I will see to this issue, please do me a favour by pushing your latest changes to your forked version, I want to clone and reproduce locally so I can look into the issue.

Sorry for the stress Chief. Thank you for your time. and greate work so far!

[kaf-lamed-beyt]

Alright chief. I'll push both templates today.