Little Coding Things

Tag: react

  • How to Add Sass to A Create-React-App Project

    How to Add Sass to A Create-React-App Project

    In this post, we’ll be sharing all the steps you need to follow to learn how to add Sass to a Create-React-App project. We’ll take it step by step and make it crystal clear for you! Let’s do it!

    Setup a Create-React-App project

    To build your initial project structure, you have two options, either install create-react-app (CRA) package globally and use that, or use npx and avoid installing create-react-app in your system.

    To check if you already have CRA installed, type in your terminal:

    create-react-app --version
    Bash

    If you see a version logged, something like 5.0.1 then you are just fine and can start the project initialization process. Otherwise, you need to decide whether to proceed by installing CRA or not. Both decisions are valid and it depends on your coding style and whether you like to keep global packages or not.

    Installing Create-React-App

    If you want to install create-react-app in your terminal type:

    npm install create-react-app --global
    Bash

    After installing the package, check its version to verify the installation by typing create-react-app --version.

    Now that you have installed CRA, you can create your project by typing

    create-react-app my-project
    Bash

    Using npx – Avoid installing Create-React-App

    If you want to avoid installing create-react-app and just use npx, you can just type

    npx create-react-app my-project
    Bash

    Basic difference between npx and npm is that npm is a package manager and npx is a package executor.

    Using npx doesn’t install the package you want permanently but rather temporarily so that it gets the job done. That’s why if you check the version of the package used after using npx, you will get nothing back, compared to the classic installation with npm in which you’ll get the installed package’s version. Try it out!

    You may ask how npx was added to my system. Since npm version 5.2.0, npx is pre-bundled with npm.

    Add Sass to Create-React-App

    Now that we have our project’s basic structure, let’s start adding some Sass code. Our first step is installing Sass:

    npm install sass
    Bash

    Now that we have the Sass package installed, the next step would be to rename our App.css file to App.scss and add some Sass styling there like so:

    body {
  background-color: red;
}
    Sass

    Now I know what you are thinking, and yes, this is not solid styling for our app; it’s just to verify our changes are applied as expected. One final step before verifying everything works. We have renamed our App.css to App.scss so we will be getting an error if we run our app because the importing in the App.js file is using the previous extension import './App.css';.

    Let’s change that too by making it import './App.scss';

    Now, check out your browser, and you should see the applied changes! Keep in mind, though, that based on your already applied stylings, you may not actually see our styles on the browser because they will probably get overridden by yours. You can still see if everything worked as expected and if our style was “passed” to the browser either by checking your browser’s dev tools or by increasing your style’s specificity.

    Sass VS SCSS – What’s the difference?

    For those of you who are paying extra attention, you may have already seen that we have installed a Sass package to handle new code styling, but we have used .scss file extension. What’s with that?

    Well, first of all, sass package encompasses both the Sass and SCSS syntax, so we are fine with that regardless of the style we want to use, Sass or SCSS.

    The difference between Sass and SCSS is basically their syntax. Sass is more concise and doesn’t use curly braces, whereas SCSS (Sassy CSS) has a more CSS-like syntax.

    Both serve the same purpose of allowing maintainability and efficient CSS usage, however .scss extension is more popular in the Sass community, and that’s why we have chosen in this post to use the .scss file extension.

    Remove Create-React-App

    If, after finishing your project, you’d like to remove CRA from your system, you can just type

    npm uninstall --global create-react-app
    Bash

    Remember, if you have used npx for your project’s initialization, nothing was installed, so you’ll be just fine, no reason for uninstalling anything.

  • How to Change The Default Port in A Create-React-App Project

    How to Change The Default Port in A Create-React-App Project

    So you just generated a new cool side project and now you are wondering how one changes the default port in a create-react-app project. After all, we have other ports available, right? And there could be a case that 3000 port is already taken. But how can you do that? There are several ways to do that, so let’s check the basic ones.

    Using package.json

    One way is to go to your package.json file and change your port through your scripts options, in this case, we are adding PORT=3001 to denote that we want our app to run in port 3001

    package.json
     "scripts": {
    "start": "PORT=3001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
    JSON5

    Using the command line

    In certain scenarios, you may find it necessary to specify the port directly via the command line when executing your run command. You could do that by typing in your terminal

    PORT=3001 npm start
    Bash

    Keep in mind that if you have a port defined on your package.json and you try adding it inline through the terminal, your package.json port setting will override any port passed through the terminal.

    Using .env file

    In case you are working on a more complex project or a project that you will be deploying for the world to see your awesome work, you’ll need to set the port to a dynamic value. Why is that? Because the system that will handle your deployment will also be handling the ports.

    In this case, you just need to tell your app, where to find the port’s value that will be used, when deployed.

    Let’s start by creating a file called .env. Type in your terminal

    touch .env
    Bash

    Now open your .env file and type

    .env
    PORT=3001
    Plaintext

    According to the advanced configuration documentation, of Create-React-App, the app’s listening port is determined by reading the value of PORT from the .env file by default.

    As a result, our application will utilize the PORT value specified in the .env file to run, so there is no need to make any more changes to our code.

    If you’re curious about the order of precedence in case someone adds a port to every possible option, I’ve conducted experiments that reveal the following respected order.

    • package.json
    • command line
    • .env file

    Don’t forget to have fun with your new project!! You got this! 😎