ScaffoldHub
  • Introduction
  • Modeling
  • Setup
    • NextJS
    • File Storage
    • Payments with Stripe
  • Debugging
  • End-to-end and Unit Tests
  • Deployment
    • Deploy to Vercel
  • Features
    • Projects
    • Preview
    • Tenants
    • Subscriptions and Payments
    • Security
    • File Storage
    • Authentication
      • Sign-in and Sign-up and Social Sign-in
      • Invitation
      • Password Reset
      • Password Change
      • Email Verification
    • Entity
      • Form
      • Filter and List
      • Export
      • Import
    • Audit Logs
    • Internationalization (I18n)
    • API Keys
    • API Documentation
  • Package.json
  • Support
  • Changelog
    • Documentation
    • Scaffolds
  • Custom Development
  • Legacy Scaffolds
  • Go to ScaffoldHub
Powered by GitBook
On this page
  • Version 2
  • Version 1
  • React Material UI
  • React Bootstrap
  • React Ant Design
  • Vue Element UI
  • Angular Material
  • Courses
  • React Pet Hotel
  • Vue Library
  • Run Locally
  • No Platform
  • Firebase
  • Setup
  • No Platform
  • Firebase

Legacy Scaffolds

This is the list of the legacy scaffolds and the setup instructions for them.

PreviousCustom Development

Last updated 1 year ago

Version 2

Version 2 is available through .

Version 1

React Material UI

React Bootstrap

React Ant Design

Vue Element UI

Angular Material

Courses

React Pet Hotel

Vue Library

Run Locally

No Platform

1 - Install the database locally

  • PostgreSQL or MySQL for the SQL version.

  • MongoDB for the MongoDB version.

2 - Open 'frontend/src/config/localhost.js'

2.1 - Set your custom configs

3 - Open 'backend/config/localhost.js'

3.1 - Set your custom configs

4 - Go to the 'frontend' folder

4.1 - Run npm run install

4.2 - Run npm run start

5 - Go to the 'backend' folder

5.1 - Run npm run install

5.2 - Run npm run start

6 - Create the database tables (SQL only)

npm run db:reset:localhost

This command will DROP ALL THE DATABASE TABLES. Make sure you are running it pointing to the correct database.

7 - The app will be available at https://localhost:3000.

Firebase

1 - Setup and deploy first

You must first set up and deploy because you need the storage rules deployed at the Firebase.

2 - Make sure your database is running locally

3 - Configure the database password at '<project-folder>/backend/config/localhost.json'.

4 - Create the database tables:

npm run db:reset:localhost

This command will DROP ALL THE DATABASE TABLES. Make sure you are running it pointing to the correct database.

5 - Open the 'backend' folder and run:

npm run start

6 - Open the 'frontend' folder and run:

npm run start

Setup

No Platform

1 - Install Docker locally (https://www.docker.com/)

2 - Open 'frontend/src/config/production.js'

2.1 - Set your custom configs

3 - Open 'backend/config/production.js'

3.1 - Set your custom configs

4 - Go to the project root folder

4.1 - Run docker-compose build

4.2 - Run docker-compose up

5 - Run docker ps to find the Container ID. Select the one that's related to the app (not the database). (For SQL only)

5.1 - Run docker exec -w=/app/backend -ti [CONTAINER ID] npm run db:reset:production

This command will DROP ALL THE DATABASE TABLES. Make sure you are running it pointing to the correct database.

6 - The app will be available at https://localhost:8080.

Firebase

1 - Generate the application and download the code

2 - Configure Firebase

2.2 - Enable Storage

  • Go to Storage

  • Click at 'Enable'

2.3 - Enable Email/Password sign-in:

  • At the Firebase console, open the Auth section.

  • On the Sign-in method tab, enable the Email/password sign-in method and click Save.

2.4 - Add the Firebase project id to the '<project-folder>/.firebaserc'.

2.5 - Configure the client-side account's credentials:

  • Go to the Firebase Project.

  • Open 'Project settings'.

  • At 'Your apps', click at the web icon.

  • Copy only the content of the var 'config'.

  • Paste the content at the variable 'firebaseConfig' of the files:

    • '<project-folder>/frontend/src/config/localhost.js'

    • '<project-folder>/frontend/src/config/development.js'

    • '<project-folder>/frontend/src/config/production.js'

2.6 - Configure the server-side account credentials:

  • Go to the Firebase Project.

  • Click at the configuration icon, placed near 'Overview' at the left corner.

  • Click at 'Project settings'.

  • Open the tab 'Service accounts'.

  • Open 'Firebase Admin SDK'.

  • Click at 'GENERATE NEW PRIVATE KEY'.

  • Save and replicate the file as:

    • <project-folder>/backend/service-accounts/localhost.json

    • <project-folder>/backend/service-accounts/test.json

    • <project-folder>/backend/service-accounts/development.json

    • <project-folder>/backend/service-accounts/production.json

2.7 - Upgrade the Firebase project to the Blaze (Pay as you go) plan

3 - Create and configure a PostgreSQL or MySQL connection

The database instance doesn't need to be at the Google Cloud, but I recommend it because of the low latency.

3.3 - Create a new instance.

3.4 - Go to 'Connections'.

  • Mark Public IP

  • Add '0.0.0.0/0' or your IP address to the new Authorized networks.

3.5 - Go to 'Overview'.

  • Open '<project-folder>/backend/config/<development|production>.json'.

  • Inform the database password at the database.password variable.

  • Copy the Public IP address to the database.migrationHost variable.

  • Copy the Instance connection name to the database.host as '/cloudsql/<instance connection name>'.

  • Ps.: If you experience problems connecting to the database, try using the Public IP address at the database.host.

3.5 - Go to 'Databases'.

  • Create a new database and name it 'development'.

4 - Configure email sender (Optional): In order to be able to send user invitation emails, you need the SMTP credentials configured. It's optional if you don't have it configured the app just won't send those emails.

  • Open '<project-folder>/backend/config/<environment>.json'.

  • Locate the 'email' section.

  • Configure the SMTP credentials. See https://nodemailer.com for config options.

5 - Configure Internationalization (I18n)

You must setup the labels for the entities, fields and roles.5.1 - For each locale at 'frontend/src/i18n/<locale>.js':

  • Go to the 'entities' section.

  • Add the labels for the entity and its fields.

  • Go to the 'roles' section.

  • Replace the object name for the label.

6 - Setup project dependencies

6.1 - Download and install NodeJS

6.2 - Open the console at the project folder.

6.3 - Update NPM:

npm install -g npm

6.3 - Install firebase-tools globally:

npm install -g firebase-tools

6.4 - Log in at firebase-cli and add the project:

firebase login

6.5 - Open the 'frontend' folder and run:

npm install

npm run deploy:development

6.6 - Open the 'backend' folder and run:

npm install

npm run deploy:development

7 - Create database tables:

npm run db:reset:development

This command will DROP ALL THE DATABASE TABLES. Make sure you are running it pointing to the correct database.

8 - Open the application at the URL informed after the first deploy

2.1 - Create a Firebase project at the .

3.1 - Go to the related to the Firebase project that you created.

3.2 - Go to .

Go to , download, and install 10.20.1v of NodeJS.

https://v2.scaffoldhub.io
https://app.scaffoldhub.io/scaffold/react-material-ui-sql
https://app.scaffoldhub.io/scaffold/react-material-ui-mongodb
https://app.scaffoldhub.io/scaffold/react-material-ui-firestore
https://app.scaffoldhub.io/scaffold/react-bootstrap-sql
https://app.scaffoldhub.io/scaffold/react-bootstrap-mongodb
https://app.scaffoldhub.io/scaffold/react-bootstrap-firestore
https://app.scaffoldhub.io/scaffold/react-antd-sql
https://app.scaffoldhub.io/scaffold/react-antd-mongodb
https://app.scaffoldhub.io/scaffold/react-antd-firestore
https://app.scaffoldhub.io/scaffold/vue-element-ui-sql
https://app.scaffoldhub.io/scaffold/vue-element-ui-mongodb
https://app.scaffoldhub.io/scaffold/vue-element-ui-firestore
https://app.scaffoldhub.io/scaffold/angular-material-sql
https://app.scaffoldhub.io/scaffold/angular-material-mongodb
https://app.scaffoldhub.io/scaffold/angular-material-firestore
Firebase Console
Google Cloud Console
SQL instances
https://nodejs.org/en/blog/release/v10.20.1/