how can I connect a local/offline prepopulated DB on ReactBoilerPlate

Question

I'm new to the world of react / react boilerplate. And I have the following problem that I can not solve.

Show in the react the results of a local/offline pre-populated database using sqlite3.

is it possible to do that? You can give me some example of how it is done, so I can try here.

Thank you very much.

score 0 · Answer 1 · answered Dec 14 '17 at 18:17

I found the solution

I create 3 files and update my index.js:

Create - mydb.sqlite3, mydb.json(create automatic), sqlite.js.

sqlite.js code:

var sqliteJson = require('sqlite-json');
var sqlite3 = require('sqlite3').verbose();

var db = new sqlite3.Database('./mydb.sqlite3');
exporter = sqliteJson(db);

db.serialize(function() {

  exporter.save('select * FROM lorem', 'mydb.json', function (err, data) {

  });

});

db.close();

And my index.js:

/*
* HomePage
*
* This is the first thing users see of our App, at the '/' route
*
* NOTE: while this component should technically be a stateless functional
* component (SFC), hot reloading does not currently support SFCs. If hot
* reloading is not a necessity for you then you can refactor it and remove
* the linting exception.
*/

import React from 'react';
import { FormattedMessage } from 'react-intl';

import messages from './messages';
import NavBar from 'components/NavBar';
import VerticalNav from 'components/VerticalNav';

import data from 'dataBase/mydb.json';

export default class HomePage extends React.Component { // eslint-disable-line react/prefer-stateless-function

  constructor(props){
    super(props);
    this.state = { lista: [] }
  }

  componentWillMount(){
     this.setState({lista:data});
  }

  render() {
    return (
      <div>
        <NavBar />
        <div className="row ml-0 mr-0">
          <VerticalNav />
          <div className="col-11 pl-0 pr-0">
            <div className="container">
                  {
                        this.state.lista.map(function(data){
                          return (
                            <div className="row mt-5" key={data.id}>
                        <div className="col-6"><b>Info:</b> {data.info}</div>
                            </div>
                          );
                        })
                      }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

I hope can I help someone.

how can I connect a local/offline prepopulated DB on ReactBoilerPlate

1 Answers1