Проблемы с добавлением конденсатора в рабочее приложение MERN - PullRequest
Новая
       11

Проблемы с добавлением конденсатора в рабочее приложение MERN

0 голосов
/ 19 апреля 2020

Я создал рабочее приложение Mongo / Express / React / Node, изменив этот шаблон . Я добавил еще пару страниц, и он работает нормально, но я пытаюсь добавить в него конденсатор, чтобы иметь версии iOS и Android. Я следовал инструкциям Capacitor для Добавление Capacitor в существующее веб-приложение , и оно прекрасно работает, но ничего не происходит. Если я добавлю тег сценария с предупреждением на index.html, он запустится. Я думаю, что это не работает, обслуживая приложение должным образом внутри приложения. Так что это либо означает, что мне нужно, чтобы оно служило приложению должным образом внутри Capacitor, если это вообще возможно, либо мне нужно сделать так, чтобы оно связывало приложение React, чтобы его можно было загружать в приложение таким образом.

Вот мой capacitor.config.json: 

{
  "appId": "com.example.app",
  "appName": "mern-auth-capacitor",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "client/public",
  "cordova": {}
}

Вот это client/public/index.html

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="theme-color" content="#000000">
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <title>MERN Auth App</title>
    </head>
    <body>
      <noscript>
        You need to enable JavaScript to run this app.
      </noscript>
      <div id="root"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      <script>alert('index.html')</script>
    </body>
  </html>

Вот это client/src/App.js: 

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import jwt_decode from "jwt-decode";
import setAuthToken from "./utils/setAuthToken";
import { Plugins } from '@capacitor/core';

import { setCurrentUser, logoutUser } from "./actions/authActions";
import { Provider } from "react-redux";
import store from "./store";

import Navbar from "./components/layout/Navbar";
import Landing from "./components/layout/Landing";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
import Settings from "./components/settings/Settings";
import Feedback from "./components/feedback/Feedback";
import ErrorPage from "./components/error/ErrorPage";
import PrivateRoute from "./components/private-route/PrivateRoute";
import Dashboard from "./components/dashboard/Dashboard";

import "./App.css";
alert('App.js');
const { Device, Modals } = Plugins;

// Check for token to keep user logged in
if (localStorage.jwtToken) {
    // Set auth token header auth
    const token = localStorage.jwtToken;
    setAuthToken(token);
    // Decode token and get user info and exp
    const decoded = jwt_decode(token);
    // Set user and isAuthenticated
    store.dispatch(setCurrentUser(decoded));
    // Check for expired token
    const currentTime = Date.now() / 1000; // to get in milliseconds
    if (decoded.exp < currentTime) {
        // Logout user
        store.dispatch(logoutUser());

        // Redirect to login
        window.location.href = "./login";
    }
}
class App extends Component {
    constructor(props) {
        super(props);
        this.showDeviceInfo = this.showDeviceInfo.bind(this);
    }
    async showDeviceInfo() {
        let info = await Device.getInfo();
        console.log({info});
        await Modals.alert({
            title: 'Info',
            message: `UUID: ${info.uuid};
            Model: ${info.model}`
        });
    }
    render() {
        alert('App.js - render()');
        console.log('--->> in app render!!!');
        return (
            <Provider store={store}>
                <Router>
                    <div className="App">
                        <Navbar />
                        <Switch>
                            <Route exact path="/" component={Landing} />
                            <Route exact path="/register" component={Register} />
                            <Route exact path="/login" component={Login} />
                            <PrivateRoute exact path="/settings" component={Settings} />
                            <PrivateRoute exact path="/dashboard" component={Dashboard} />
                            <PrivateRoute exact path="/feedback" component={Feedback} />
                            <Route component={ErrorPage} />
                        </Switch>
                    </div>
                </Router>
            </Provider>
        );
    }
}
export default App;

1 Ответ

0 голосов
/ 19 апреля 2020

Я только что наткнулся на это в документации по конденсатору. Мне нужно указать сервер в моем capacitor.config.json: 

{
  "appId": "com.example.app",
  "appName": "mern-auth-capacitor",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "client/public",
  "server": {
    "url": "http://192.168.1.8:3000/",
    "hostname": "localhost"
  },
  "cordova": {}
}
...