I'm learning react native and therefore I'm using an api package by the name of "apisauce" version ^2.1.2.
when backend be called with postman, I receive an array of data and when it be called with frontend application, I receive "Network_Error"
My question is what I'm doing wrong?
client.js :
import { create } from "apisauce";
const apiClient = create({
baseURL: "http://127.0.0.1:9000/api",
});
export default apiClient;
listings.js:
import client from "./client";
const endpoint = "/listings";
const getListings = () => client.get(endpoint);
export default { getListings };
App.js
import React, { useEffect } from "react";
import listingsApi from "./app/api/listings";
function App() {
const loadData = async () => {
const response = await listingsApi.getListings();
console.log(response);
};
useEffect(() => {
loadData();
}, []);
return (
<Screen>
</Screen>
);
}
export default App;
And here is the error when I do a console.log:
I have found a solution where instead to set the baseURL to backend URL, I had to set the baseURL to the ip-address of my computer.
information had been found at
I am trying to connect with wss but wss keep replacing with https
My socket config is
import Vue from 'vue';
import VueSocketIO from 'vue-socket.io';
import * as io from 'socket.io-client';
import store from '../store';
export default async (/* { app, router, Vue ... } */) => {
Vue.use(new VueSocketIO({
debug: true,
connection: io('wss://echo.websocket.org'),
vuex: {
store,
actionPrefix: 'SOCKET_',
mutationPrefix: 'SOCKET_',
},
}));
};
I get below error :
I've created a website with create-react-app and now I want to use server side rendering because of seo.
After a long research I've found a simple tool here.
It works fine but in my code I have a dynamic import await import("localization/" + newLanguage + "/" + newLanguage + ".json"); and because of that I get a SyntaxError: Unexpected token import error.
I've also tried using System.import. That worked for SSR but CRA says 'System.import' is restricted from being used. Please use import() instead..
How can I solve this problem? I don't want to eject or similiar and hold it easy.
My index.js:
require('ignore-styles');
require('babel-register')({
ignore: /\/(build|node_modules)\//,
presets: ['env','react-app'],
plugins: ["syntax-dynamic-import"]
});
require('./server');
And this is my server file:
import express from 'express';
import http from 'http';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter } from "react-router";
import App from "./src/App";
const port = 3000;
const app = express();
const server = http.createServer(app);
app.use((req, res) => {
const context = {}
const html = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
if(context.url){
res.status(302).redirect(context.url);
return;
}
res.status(200).send(html);
});
server.listen(port, function(){
console.log('Node server running on port ' + port + '.');
console.log("Time: " + new Date(Date.now()));
});
Ok. I've got it.
I've used the syntax-dynamic-import plugin from babel. With dynamic-import-node from airbnb it works.
I just made simple koa app that returns rss xml by tag using parameter. and seems like middleware can't read router from router file. I have no idea why It doesn't work. I'm running this app.js with babel-node. and It keeps saying this error below
app.use((0, _koaLogger2.default)()).use((0, _routes2.default)());
^
TypeError: (0 , _routes2.default) is not a function
route/index.js
import Router from 'koa-router'
const router = new Router({ prefix: '/'})
router.get('/:tag', async (ctx, next) =>
(ctx.body = await rssGenerator(this.param.tag)))
export default router
app.js
import Koa from 'koa'
import logger from 'koa-logger'
import routes from './routes'
const app = new Koa()
const port = process.env.PORT || 3000
app
.use(logger())
.use(routes())
app.listen(port, () => console.log("[!] Server STARTED"))
I see 2 problems here in your code:
First: you are importing routes like this:
import routes from './routes'
but in your code above the path is route/index.js and not routes
Second: in route/index.js you are exporting router
export default router
but then you are trying to import routes
I am new to react/redux I little confused with server side rending in react/redux,
Yes i saw some example on the internet but when i tried with mock api with external server , server side rendering is not working .
cat.js
import React from 'react';
import {render} from 'react-dom';
import {connect} from 'react-redux';
import * as mockApi from '../Actions/mockActions';
class Cat extends React.Component{
componentWillMount(){
this.props.getMockApi();
}
render(){
return(
<div>
Hello Dude
{this.props.mock.data.map((data,i) => {
return <li key={i}>{data.email}</li>
})}
</div>
)
}
}
const mapStateToProps = (state) => {
return {
mock:state.mock
}
};
const mapDispatchToProps = (dispatch) => {
return {
getMockApi:() => dispatch(mockApi.getMockData())
}
};
export default connect(mapStateToProps,mapDispatchToProps)(Cat);
mockActions.js
import axios from 'axios';
import * as types from './actionTypes';
export function getMockData() {
return dispatch => {
return axios.get('http://jsonplaceholder.typicode.com/users').then(response => {
dispatch(setThisData(response.data))
})
}
}
export function setThisData(data) {
return {
type:types.MOCK_API,
payload:data
}
}
App.js
import React from 'react';
import {render} from 'react-dom';
import Cat from './components/cat'
import {Provider} from 'react-redux';
import configureStore from './Store/configureStore';
import { createStore ,applyMiddleware,compose} from 'redux';
import counterApp from './Reducers'
import thunk from 'redux-thunk';
if(typeof window !== 'undefined'){
// Grab the state from a global variable injected into the server-generated HTML
const preloadedState = window.__PRELOADED_STATE__
// Allow the passed state to be garbage-collected
delete window.__PRELOADED_STATE__
const store = createStore(counterApp, preloadedState, compose(applyMiddleware(thunk)))
render(
<Provider store={store} >
<Cat/>
</Provider>
,
document.getElementById('app')
)
}
devServer.js
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware'
import webpackHotMidleware from 'webpack-hot-middleware';
import bodyParser from 'body-parser';
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux';
import counterApp from '../../src/client/ReduxServer/Reducers';
import App from '../../src/client/ReduxServer/components/cat';
import { renderToString } from 'react-dom/server'
import webpackConfig from '../../webpack.config.dev';
let app = express();
app.use(bodyParser.json());
app.use(express.static('public'))
const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler, {
hot: true,
publicPath: webpackConfig.output.publicPath,
noInfo: true
}));
app.use(webpackHotMidleware(compiler));
// app.get('/*', (req, res) => {
// res.sendFile(path.join(__dirname, '../../index.html'))
// });
//Redux Start
app.use(handleRender);
function handleRender(req,res) {
const store = createStore(counterApp);
const html = renderToString(
<Provider store={store} >
<App/>
</Provider>
)
const preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState))
}
function renderFullPage(html, preloadedState) {
console.log(preloadedState)
return `
<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
</head>
<body>
<div id="app">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
<script src="bundle.js"></script>
</body>
</html>
`
}
//Redux Ends
app.listen(3000, () => {
console.log('Listening')
});
Right now this will only server render the hello dude but not the mock Api call data .I know that missed to fetch the data from server side but the point is what will i do If ihave to render a two components and that component has 5 api reuqest ,And how to fecth the correct api Request
Right Now My client Side Prefecthed state will look like this
window.__PRELOADED_STATE__ = {"mock":{"data":[]}}
Ok, to make this clear, you've created the code to handle server rendering. However, it doesn't load the data that is supposed to be fetched right?
You've done the first step, great! The next step is to load the actual dynamic data to the store. Let's look at this code here
function handleRender(req,res) {
const store = createStore(counterApp);
const html = renderToString(
<Provider store={store} >
<App/>
</Provider>
)
const preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState))
}
What happened is that you created a store. The store is used to render the html into a string. Then you get the store state and put it into preloadedState.
This is great accept that renderToString will not call this.props.getMockApi(); as you would expect.
Instead, you have to fetch the state before you call renderToString();
In this case, what you could do is as following. (Note that this is just an example, you probably want to use something more general in production, especially if you use something like react-router.)
import * as mockApi from '../Actions/mockActions';
function handleRender(req, res) {
const store = createStore(counterApp);
store.dispatch(mockApi.getMockData())
// And since you used redux-thunk, it should return a promise
.then(() => {
const html = renderToString(
<Provider store={store}>
<App/>
</Provider>
)
const preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(html, preloadedState))
});
}
Simple isn't it? ;D, nah just joking. This is one part of react where there's not really an exact solution to the problem yet.
Personally, if I had the choice to go back in time, I'd tell myself to learn other stuff other than server rendering. There are other techniques such as code splitting, lazy loading, etc that I could've used instead. With server rendering, if the javascript arrives long after the user has seen the initial page, they might get frustrated by other things that require js. For example in my case, some links are not working, some buttons don't do anything, etc.
I'm not saying that server rendering is not good. It's an interesting technique, just that there are other techniques that are more beneficial to learn first (Oh, and server rendering basically locks you to use nodejs for your backend). Good luck to you :)