Comments (9)
Thanks @shannonhochkins I was making a stupid mistake. Now everything works at least under http. Thanks again and looking forward to see what's coming!
from ha-component-kit.
Hi! Thankyou! There's a bug that appears with https on the first login, if you refresh it should load properly, it's not completely tested but there is an option on the HassConnect component to allow http urls, it's all documented on the storybook page :)
from ha-component-kit.
Thanks @shannonhochkins I've read your storybook from top to bottom. Although I say a method for allowing insecure connections I was not able to make it work under the simple test app. Using https even with refresh it's not working for me. Can you point me in the right direction please?
from ha-component-kit.
It might help for you to provide what you've tried, have you entered your home assistant url correctly into the props? What node / npm version are you using? Is there any errors in the console? I need more information to help :)
from ha-component-kit.
Sorry, you are right. Here's an overview of the setup:
- HA is accessible via http://ip:8124 or http://homeassistant.local:8124 or https://ha.mydomain.com
- I use a reverse proxy in my Synology which redirects https HA request to http://ip:8124
- Under HA configuration I have the following on http
http:
use_x_forwarded_for: true
trusted_proxies:
- 192.168.154.0/24
- ::1
server_port: 8124
Under src/App.tsx I used your sample code
// App.tsx
import React from 'react';
import { HassConnect } from '@hakit/core';
import './App.css';
// TODO: replace this with your home assistant url:
const HASS_URL = 'http://homeassistant.local:8124';
function App() {
return (
<HassConnect hassUrl={HASS_URL}>
<p>This will render when connected!</p>
</HassConnect>
);
}
export default App;
The console shows
webpack compiled successfully
No issues found.
and browser
Cannot connect to Home Assistant instances over "http://".
If I replace HASS_URL with https://ha.mydomain.com the console shows no errors and browser Unknown error (TypeError: Failed to fetch).
Versions:
npm: '10.1.0'
node: '20.7.0'
from ha-component-kit.
Have you tried adding options prop to HassConnect?
https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-hassconnect--docs
Specifically, enabling the allowNonSecure option?
This may have something to do with your proxy setup, but I'd start by trying the options prop
from ha-component-kit.
I use my public url by default, but if the options prop doesn't work for you I'll attempt to debug this more on my side
from ha-component-kit.
Have you tried adding options prop to HassConnect?
https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-hassconnect--docs
Specifically, enabling the allowNonSecure option?
This may have something to do with your proxy setup, but I'd start by trying the options prop
Did try to include options prop but struggling with the correct syntax. Can you give me an example based on code above please?
from ha-component-kit.
If you use typescript you'll get full intellisense, however here's what you should try
<HassConnect hassUrl={HASS_URL} options={{
allowNonSecure: true
}} >
<p>connected</p>
</HassConnect>
from ha-component-kit.
Related Issues (20)
- Entity icon only updates when refreshing the page HOT 5
- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" HOT 17
- Problem using the dashboard in companion app HOT 28
- Modal - Animation Control HOT 1
- Discord link is expired HOT 1
- Vacuum Card - New card to control Vacuum entities HOT 1
- Prevent sidebar/group collapsing HOT 5
- POC - Swap store to signals HOT 1
- Multi lingal HOT 1
- Option to disable animations HOT 5
- Authorization request after each page refresh HOT 7
- access to HA without logging in (use token) HOT 4
- AlarmCard
- Card title and description HOT 3
- useDevice hook HOT 6
- Style rgb variables for error/warning/success HOT 4
- Deploy docs update: SSH add-on HOT 3
- Theme provider flashes HOT 1
- ThemeProvider - precompile and make more dynamic
- useTemplate
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ha-component-kit.