Legacy Scaffolds

ScaffoldHub
Search…
ScaffoldHub
Introduction
Legacy Scaffolds
This is the list of the legacy scaffolds and the setup instructions for them.
Scaffolds
React Material UI
​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​
React Bootstrap
​https://app.scaffoldhub.io/scaffold/react-bootstrap-sql 
​https://app.scaffoldhub.io/scaffold/react-bootstrap-mongodb​
​https://app.scaffoldhub.io/scaffold/react-bootstrap-firestore​
React Ant Design
​https://app.scaffoldhub.io/scaffold/react-antd-sql 
​https://app.scaffoldhub.io/scaffold/react-antd-mongodb 
​https://app.scaffoldhub.io/scaffold/react-antd-firestore​
Vue Element UI
​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​
Angular Material
​https://app.scaffoldhub.io/scaffold/angular-material-sql 
​https://app.scaffoldhub.io/scaffold/angular-material-mongodb​
​https://app.scaffoldhub.io/scaffold/angular-material-firestore​
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.1 - Create a Firebase project at the Firebase Console.
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
3.1 - Go to the Google Cloud Console related to the Firebase project that you created.
The database instance doesn't need to be at the Google Cloud, but I recommend it because of the low latency.
3.2 - Go to SQL instances.
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
Go to https://nodejs.org/en/blog/release/v10.20.1/, download, and install 10.20.1v of 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
Custom Development
Last modified 1yr ago
Copy link
Contents