DEV Community: Tanvesh sarve

Automating deployment with React and Firebase and GitHub actions!

Tanvesh sarve — Mon, 07 Sep 2020 12:02:03 +0000

My Workflow

Automating the deployment of your side-projects is one of the best things you could for your future self. Also known as Continuous deployment or CD. In this blog, we will be using Firebase for free hosting and Github actions for continuous deployments.

If you are here then you probably know about firebase, its a development platform by Google that offers services such as hosting, realtime database, cloud storage, etc.

If you have never deployed a react app before with firebase, there are tons of tutorials out there but here is One

I wrote a GitHub action to build and deploy my side project to firebase when pushed to its repo.

When writing your own action, make sure you have your FIREBASE_TOKEN ready. You can also generate your own by doing this on your terminal inside your repo :

firebase login:ci

and add this token to the secrets of your GitHub repo as FIREBASE_TOKEN

Submission Category:

DIY Deployments

Yaml File or Link to Code

name: Firebase Deploy
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Here is the link to the main.yml file : main.yml

Here is the repo

tanvesh01 / CoronaTrackerApp

A Corona Tracker App, track the number of COVID positives, recovered and deaths in India and the world

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool…

View on GitHub

Additional Resources / Info

A similar tutorial for Angular folks :
Link

React + Redux Setup with Redux-toolkit ⚛

Tanvesh sarve — Sat, 22 Aug 2020 14:57:18 +0000

What every other post about Redux on the internet says: 😶

"Don't use Redux, it has too much boilerplate".

"Oh, man! I have to do so many npm installs"

"You have to write so much code, just to configure it!"

Never heard of Redux or super new to it? I gotch you

This is one of the best explanations of Redux. Here ya go!

Why use Redux Toolkit? 🤷‍♂️

Redux toolkit includes all the functions or "tools", you want for a Redux application. At the end of the day, less code and faster setups of Redux in every scenario.

Here's what the Official docs said :

These tools should be beneficial to all Redux users. Whether you're a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.

Setup create-react-app with Redux 🔨

Create-react-app gives you a basic React app so don't have to setup React yourself. Install it globally, if haven't already.

Do this on your terminal :

npx install -g create-react-app

Then to create your React app and cd into the root directory of your React app

create-react-app react-redux
cd react-redux

Then we will install redux

npm install --save react-redux @reduxjs/toolkit

We will be following this folder structure

Now we have to configure our Store, now this is where you'll the magic redux toolkit! Now create a folder called store and under that a file called reducerConfig.js containing

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
const reducer = combineReducers({
    // we will return here, you have to include all your Reducers here!
});
const store = configureStore({
    reducer,
});
export default store;

Here configureStore({}) wraps createStore() to simplify the configuration for us. You can add whatever Redux middleware you want to supply and it already includes redux-thunk and has already enabled Redux DevTools Extension (install this!).
People who have used Redux before could already see how much work is handled by Redux Toolkit.

Now we need to connect our store to our app or just wrap it with
Redux. Import reduxConfig.js and Provider from react-redux into src/index.js

....
....
import store from "./store/reducerConfig";
import { Provider } from "react-redux";

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

Now start your application with npm start and open up Redux DevTools, you should see @@INIT. Congrats you have setup Redux with React!! 🥳️

How to use Redux in your project? 🤔

Just to understand the workflow we will build a simple counter app.
Make a folder under our store called "actions" and then make a file called counterActions.js,
store/actions/counterActions.js :

// This is a Action Type, you can move this to  another file and export it 
// from there -- its called "best practice" :)
export const ADD = "ADD";  
// This is the "Action" it self which indicates which reducer which will be called
export const inc = () => {
    return {
        type: ADD,
    };
};

Now we are going to create Reducers. This is where we will initialize our state and make changes to it.
If the concept of actions and reducers are not making sense right now, it will in a second. Now we create a folder called "reducers" and then create a file inside it called "counter.js".

src/store/reducers/counter.js

import { ADD } from "../Actions/counterActions";

const initState = { // this is your initial state.
    counter: 0, // variable inside your state, too keep track of the count.
};
// assigning initial state and receiving actions as arguments.
const reducer = (state = initState, actions) => { 
    switch (actions.type) {
        case ADD:
            return {
                ...state, // here you copy the state and make changes to it.
                counter: state.counter + 1,
            };
        default:
            return state;  // Have to return state as a default
    }
};
export default reducer;

Here a specific part of the state is updated according to the action dispatched by our frontend.
Here is what Freecodecamp had to say:

The only way to update a state inside a store is to dispatch an action and define a reducer function to perform tasks based on the given actions. Once dispatched, the action goes inside the reducer functions which performs the tasks and return the updated state to the store. This is what Redux is all about.

Now in our reduxConfig.js file add our reducer that we just created

.
.
import counter from "./reducers/counter";
const reducer = combineReducers({
    counter, // put all your reducers here!  
});
.
.

Handling Redux in our React code ⚛

In your src/App.js file paste the following React code :

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { add } from "./store/Actions/counterActions";
function App() {
    const dispatch = useDispatch();
    const { counter } = useSelector((state) => state.counter);
    return (
        <div style={{ textAlign: "center" }}>
            <div>
                <p style={{ margin: "1rem" }}>{counter}</p>
                <button onClick={() => dispatch(add())}> Add +1 </button>
            </div>
        </div>
    );
}
export default App;

Here useDispatch() is provided by "react-redux" and used to dispatch our actions.

 const dispatch = useDispatch();

Remember the name of our reducer we imported in reducerConfig.js, that's the name we have to use when using the useSelector() hook. It receives our state in arguments and then we can extract every other variable in our state with the help of destructuring :

const { counter } = useSelector((state) => state.counter);

Now in your Terminal, to start your React app:

npm start

Now your app should look like this :

Congrats you made it! 🥳️

You have setup react and Redux! There are obviously many complex use cases of Redux which I will cover in the upcoming blogs.

Inspiring lyrics from Hip-hop (You'll find these in every one of my blogs)

-Logic, Under Pressure

Sup!👋

Tanvesh sarve — Wed, 19 Aug 2020 14:33:11 +0000

I am Tanvesh Sarve, a "Full-stack 10x" Developer

(not really! ayy don't tell nobody tho)

ok, we friends now? cool.
This right here is my first blog ever.
AND
I have heard that writing blogs or making videos on a topic actually gets you access to
an eight-dimensional world where you are learning at 8x speeeeed, just to ensure you don't get it wrong because at the end day, You are teaching people!

SOO here I am trying to make great coding tutorials on everything really with the help of this great platform 👋. I really appreciate and thank every one of this tech community and my lovely people on twitter .

Please expect a load of tutorials on React and Redux. Because I just LOOVE them.

Fun fact: I just gave a coding test from Google India for an internship there. Not my best performance on a coding test for sure. BUT you know how google is? the same ol' google! testing talented people on the thing which they are never going to use in the JOB ITSELF! * I mean, I am not mad or anything. *
*So people at DEV reading this somehow and you guys have any position for interns you know who to contact. *wink.
**
Here is a project i did recently:

I am a MASSIVE fan of hip-hop, so in every blog, I write I'll have some motivational quote from the industry

- Logic, Amen, 2020.