Last active
June 25, 2022 11:27
-
-
Save tejas-hosamani/4c15130c3f5998a8fb309ff041001eae to your computer and use it in GitHub Desktop.
React + Redux project setup.
npx create-react-app my-new-react-app
cd my-new-react-app
git checkout -b task/initial-setup
npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react husky prettier
update README.md:
git clone <repo link if there is>
cd project directory name
npm install
npm run dev
Update package.json with @ scripts:
"dev": "react-scripts start",
"lint": "eslint src/**/*.js src/**/*.jsx",
"format": "prettier --write src/**/*.js src/**/*.jsx",Just after sccript section:
"husky": {
"hooks": {
"pre-commit": "npm run lint && npm run format"
}
},create .prettierrc file and add:
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "es5",
"arrowParens": "avoid",
"endOfLine": "lf"
}
create .prettierignore file and add:
serviceWorker.js
*.md
node_modules/
Create .eslintrc.js file and add:
module.exports = {
parser: 'babel-eslint',
root: true,
env: {
node: true,
},
extends: ['airbnb', 'plugin:prettier/recommended'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'react/prop-types': [0],
},
parser: 'babel-eslint',
parserOptions: {
parser: 'babel-eslint',
},
overrides: [
{
files: ['serviceWorker.js'],
},
],
};Create .env.example file and add:
REACT_APP_BACKEND_API_PATH=
REACT_APP_FRONT_END_URL=http://localhost:3000
Create .editorConfig file and add:
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
[*.{yml,yaml}]
indent_size = 4
[*.{js,jsx,ts,tsx,vue}]
max_line_length = 100
Update serviceWorker.js with:
/* eslint-disable no-param-reassign */
/* eslint-disable no-use-before-define */
/* eslint-disable no-undef */
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.0/8 are considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl, {
headers: { 'Service-Worker': 'script' }
})
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}npm i redux react-redux redux-thunk
If you need react router:
npm i react-router react-router-dom
Update index.jsx file to:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/rootReducer';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const store = createStore(rootReducer, applyMiddleware(thunk));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
// eslint-disable-next-line no-undef
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();IF NEEDED:
Create src/Utils/LocalStorage.js and add:
/* eslint-disable no-undef */
export function getLocalStorage(key) {
if (!key) {
console.error(`${key} doesn't exists.`);
return null;
}
try {
const valueStr = localStorage.getItem(key);
if (valueStr) {
return JSON.parse(valueStr);
}
return null;
} catch (err) {
console.error(err);
return null;
}
}
export function setLocalStorage(key, obj) {
if (!key) {
console.error(`${key} doesn't exists.`);
return null;
}
try {
localStorage.setItem(key, JSON.stringify(obj));
return true;
} catch (err) {
console.error(err);
return false;
}
}
export function deleteLocalStorage(key) {
if (!key) {
console.error(`${key} doesn't exists.`);
return null;
}
try {
localStorage.removeItem(key);
return true;
} catch (err) {
console.error(err);
return false;
}
}Create src/actions folder
Create src/reducers/rootReducer.js and add:
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
});
export default rootReducer;Express with static file server and API routes
// server.js
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const path = require("path");
app.use(express.static(path.join(__dirname, "build")));
app.use(bodyParser.json());
app.get("/api/", (req, res) => {
res.json({
content: "Hello from /api/postRequest"
});
//API logic
});
app.post("/api/", (req, res) => {
res.json({
content: "Hello from /api/postRequest"
});
//API logic
});
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "build/index.html"));
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log("Listening on port", port);
});# Dockerfile
FROM node:10
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
# For CI. Not yet.
# RUN npm ci --only=production
# Bundle app source
COPY . .
EXPOSE 3030
CMD [ "node", "server.js" ]Observe this file carefully before using. Not every project structure is same.
#!/bin/bash
# Fill these things:
REPO=<repo>
BRANCH=production
DIRECTORY=<dir-to-create> # It's usually project/repo name
REACT_APP_BACKEND_API_PATH=<back-end-api-link> # OR "$(curl icanhazip.com)" for server IP
REACT_APP_FRONT_END_URL=<fronendURL> # OR $(curl icanhazip.com)
mkdir $DIRECTORY
# Inside ROOT
cd $DIRECTORY
git clone $REPO
# Inside Frontend
# cd <fronend-if-exist>
git fetch
git checkout $BRANCH
touch .env
# Get current IP of cloud and put it in .env - not recomended
echo REACT_APP_BACKEND_API_PATH=http://$REACT_APP_BACKEND_API_PATH:5000 > .env #http://$(curl icanhazip.com):5000 > .env
echo REACT_APP_FRONT_END_URL=http://$REACT_APP_FRONT_END_URL > .env #http://$(curl icanhazip.com) >> .env
# Inside ROOT
cd ..
sudo apt-get update
sudo apt-get upgrade -y
sudo ufw allow 5000
# Inside ~
cd ..
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
sudo apt install docker-compose -y
sudo usermod -aG docker ubuntu
sudo apt install make -y
# sudo docker volume create --name=mongo_data
# if makefile exists
# make build
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment