This is a base template/skeleton to be used as a starter for a React project. It comes with many features to start a project from a website to a full web app. It works together with Rexin Backend to manage authentication, users and collections.
If do feel yo can imporve this project, collaborations are more than welcome!
The project is deployed to Heroku.
You can see the frontend here: Rexin Frontend
If you want to test the backend with Postman, it's here: Rexin Backend
The repo is ready to deploy to Heroku with a Heroku Post-process hook.
- Based on React with Create React App.
- Global state management with React Redux
- Internationalization with i18next.
- Webfonts with Webfontloader.
- Styling with Styled-Components.
- Icons with React Icon Kit.
- Connected to Rexin Backend.
- Authentication based on JWT.
- Role based authorization.
- User registration workflow (Sign-up and Verification by email).
- User management workflow (Sign-in, Edit Profile, Password Forgot and Password Reset).
- Admin page for users with Admin role.
- Working Contact Form through Rexin Backend and Mailgun.
- Root url for default language and folders for aditional ones.
- Google crawler friendly.
- SEO optimized and ready.
- 15 pre-configured pages.
- ESLint for good coding practices.
- Code formatting using Prettier and ESLint.
- Node.js 8+
- Clone the project from github. Change "myproject" to you project name.
git clone https://github.com/ramoncardena/rexin-frontend ./myproject- Download repository
- Uncompress to your desired directory
cd myproject
npm install
npm updateThe project was initialized with create-react-app. In the project directory, you can run:
Runs the app in Server Side Rendering mode. Express starts in port 3000 managed by PM2.
Remember to execute npm run build before runining the server localy.
Open http://localhost:3000 to view it in the browser.
Runs the app in the development mode as originaly in Create React App without Server Side Rendering.
Open http://localhost:3000 to view it in the browser.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
Runs de app in Server Side Rendering mode in development. Express starts in port 3000 managed by Nodemon. The server will watch for changes and live reload.
Remember to execute npm run build if you make changes inside the client application in /src.
Open http://localhost:3000 to view it in the browser.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
├── build
├── public
│ └── locales
│ ├── en
│ └── es
├── server
└── src
├── api
├── components
├── constants
├── images
├── pages
│ ├── account
│ └── admin
├── reducers
├── utils
├── App.css
├── App.js
├── App.test.js
├── index.css
└── index.js
The app is based on Create React App without ejecting, so all the Server Side Rendering in mounted over CRA in a separate folder and you can develop your React app as usual.
The SSR part of the application is based on Patick Carlson's project CRA-SSR. Running in SSR mode we have:
- React Router v4 with Thunk.
- Full SEO support with React Helmet.
- Preloaded page data via async/await and React Frontload.
- Code splitting via React Loadable.
- Server-side cookie support
- Full internationalization support with i18next.
/server folder contains the files for running the server and processing the files server side. There are also some changes to the original CRA in index.js App.js and routes.js to make all SSR work.
If you want to learn more about SSR I hightly recommend you to read Patick's tutorial Server-side rendering with create-react-app, code-splitting, preloaded data, React Router, Helmet, Redux, and Thunk.
Rexin Frontend connects to Rexin Backend for user registration, authentication and mailing. Rexin Backend is based on Daniel Avellaneda's repository Node.js express.js MongoDB JWT REST API - Basic Project Skeleton.The main features of the backend are:
- Multiple environment ready (development, production)
- Custom email/password user system with basic security and blocking for preventing brute force attacks.
- Compressed responses.
- Secured HTTP headers.
- CORS ready.
- Cache ready (Redis)
- HTTP request logger in development mode.
- User roles.
- Pagination ready.
- User profile.
- Users list for admin area.
- Login access log with IP, browser and country location (for country it looks for the header cf-ipcountry that CloudFlare creates when protecting your website).
- API autogenerated documentation by Postman.
- API **collection example ** for Postman.
- Testing with mocha/chai for API endpoints.
- NPM scripts for cleaning and seeding the MongoDB database.
- NPM script for keeping good source code formatting using prettier and ESLint.
- Use of ESLint for good coding practices.
- Mailer example with Nodemailer and Mailgun.
- Contact form endpoint for sending the form with Mailgun.
- JWT Tokens, provide login with Authorization header with value Basic username:password where username:password MUST BE ENCODED with Base64.
- Make requests with a token after login with Authorization header with value Bearer yourToken where yourToken is the signed and encrypted token given in the response from the login process.
Check the repository page to clone the backend and read the documentation.
Main features can be configured through the config.js file in the root folder.
General
version [string]
i18n
DEFAULT_LANGUAGE [sring]
ALL_LANGUAGES [array]
Colors
PRIMARY_COLOR [string]
SECONDARY_COLOR [string]
HOVER_COLOR [string]
TEXT_COLOR [string]
TEXT_LIGHT_COLOR [string]
TEXT_STRONG_COLOR [string]
BACKGROUND_COLOR [string]
MODAL_BACKGROUND [string]
SEO
DEV_SITE_URL [string]
PROD_SITE_URL [string]
DEFAULT_TITLE [string]
DEFAULT_DESCRIPTION [string]
DEFAULT_SEP [string]
FACEBOOK_APP_ID [string]
DEFAULT_TWITTER [string]
Backend API
BASE_URL [string]
Social Networks Menu
facebook [ { active: boolean, link: string } ]
twitter [ { active: boolean, link: string } ]
linkedin [ { active: boolean, link: string }]
instagram [ { active: boolean, link: string } ]
github [ { active: boolean, link: string } ]
Rexin Frontend comes with some default pages that you can found at:
pages
├── account
└── admin
There are 3 types of pages:
- Public Pages
- Private Pages
- Role Based Page
You can create and modify pages as you wish. You can use OnePage.js as a reference for public pages, AccountPage.js for private pages and AdminPage.js for role based private pages.
All the pages in Rexin Frontend contain a Page Component wraping around the content to render SEO meta and title.
Home Page /src/pages/HomePage
Page One /src/pages/OnePage
Page Two /src/pages/TwoPage
Page Three /src/pages/ThreePage
Page Four /src/pages/FourPage
Contact Page /src/pages/ContactPage
Not Found Page /src/pages/NotFoundPage
Profile/Account Page /src/pages/account/AccountPage
Sign In Page /src/pages/account/SignInPage
Sign Up Page /src/pages/account/SignUpPage
Password Forgot Page /src/pages/account/PasswordForgetPage
Password Reset Page /src/pages/account/PasswordResetPage
Account Verify Page /src/pages/account/VerifyPage
Edit Profile Page /src/pages/account/EditProfilePage
Admin Page /src/pages/admin/AdminPage
Authentication is done with JWT (JSON Web Token) against the Rexin Backend.
We keep session using global state handling with Redux.
For authorization we use a HOC to check for the authorization condition that includes checking the JWT token and after that, checking user's role.
You can follow the code of account pages to see how it works.
User registration and authentication is provided by Rexin Backend. The pages included in the project allows you to handle user workflow:
- User sign up providing full name, email and password.
- User account verification providing verification code.
- User sign in providing email and password.
- Password forgot providing email.
- Password reset providing verification id.
- User profile edit providing full name, email, city, country and new password.
Inhternationalization is carried out by i18next and react-i18next. If do you want do dig deeper I'll recomend you to check their page out, it's an awesome component for doing i18n right.
Rexin Frontend comes configured with 2 languages, English and Spanish. Languages files can be found here:
public
└── locales
├── en
└── es
In the application you shoud use withTranslation() HOC to pass the t function as a prop and then use it to get the transalated strings like this:
const {t} = this.props
.
.
.
{t('Home_Title')}
Rexin Frontend comes with some components for you to use. I'll be adding more in the future.
The Navbar component is a modular navbar with the following components:
- Logo and Title on the left panel.
- Navigation menu, account menu, admin menu, icon menu, sign-in/sign-out button and mobile buton on the right panel.
The FooterBar compontent is a navbar with the following components:
- Copyright notice.
- Navigation menu .
- Social icons menu on the right.
This is a component to show while loading the pages.
This component is responsible to change current language through i18next.
Feel free to report any bugs or improvements. Pull requests are always welcome.
It´s amazing you feel like that! Send me a tweet Ramon Cardena, share this with others or make a pull request. Enjoy!
Grateful to the authors of existing related projects for their ideas and/or collaboration:
- Daniel Avellaneda @davellanedam
- Patrick Cason@cereallarceny
This project is open-sourced software licensed under the MIT License. See the LICENSE file for more information.