You can update the styles/index.scss or create new .scss files inside styles/ and import them into your current scss or js files depending on your needs.
Add more files into your ./src/js/components or styles folder as you need them and import them into your current files as needed.
Use folder per components.
Add more files into your ./src/js/pages and import them in ./src/js/layout.tsx.
Use folder per page.
This boilerplate comes with a centralized general Context API. The file ./src/js/store/flux.tsx has a base structure for the store, we encourage you to change it and adapt it to your needs.
React Context docs
The Provider is already set. You can consume from any component using the useContext hook to get the store and actions from the Context.
import { Context } from "../store/appContext";
const MyComponentSuper = () => {
//here you use useContext to get store and actions
const { store, actions } = useContext(Context);
return <div>{/* you can use your actions or store inside the html */}</div>
}- Extensive documentation here.
- Integrated with Pipenv for package managing.
- Fast deloyment to heroku with
$ pipenv run deploy. - Use of
.envfile. - SQLAlchemy integration for database abstraction.
It is recomended to install the backend first, make sure you have Python 3.8, Pipenv and a database engine (Posgress recomended)
- Install the python packages:
$ pipenv install - Create a .env file based on the .env.example:
$ cp .env.example .env - Install your database engine and create your database, depending on your database you have to create a DATABASE_URL variable with one of the possible values, make sure yo replace the valudes with your database information:
| Engine | DATABASE_URL |
|---|---|
| SQLite | sqlite:////test.db |
| MySQL | mysql://username:password@localhost:port/ods |
| Postgress | postgres://username:password@localhost:5432/ods |
- Migrate the migrations:
$ pipenv run migrate(skip if you have not made changes to the models on the./src/api/models.py) - Run the migrations:
$ pipenv run upgrade - Run the application: `$ pipenv run start
- Make sure you are using node version 14+ and that you have already successfully installed and runned the backend.
- Install the packages:
$ npm install - Start coding! start the webpack dev server
$ npm run start
This template is 100% compatible with Heroku[https://www.heroku.com/], just make sure to understand and execute the following steps:
// Install heroku
$ npm i heroku -g
// Login to heroku on the command line
$ heroku login -i
// Create an application (if you don't have it already)
$ heroku create <your_application_name>
// Commit and push to heroku (commited your changes)
$ git push heroku main