fahrizalm14 / vaste

Build App Front End (ReactJs) and Back End (ExpressJs) - API implementation, styling with styled-component, connect QRcode and mores.

Home Page:https://vaste-app.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

logo vaste

MIT License Donate

VASTE - The World's Easiest and Safest Text Copier.

Vaste is an open-source copy/paste software multiplatform written in node.js, and run without a database. All texts can only be seen on the client side, the server only as a data sender/broker.

🛠️ How it Works

📚 Library :

🌎 Browser :

  • the browser generates a random token as the recipient address of the plain text to paste/copy.
  • token will be displayed as qrcode and plain text.
  • (copy scenario) browser will display plain text with the help of socket.io according to connected token.
  • (paste scenario) plain text that has been written in the text area will be sent according to the address of the connected token.

⌨️ Development

$ git clone git@github.com:erzetid/vaste.git
$ cd vaste
$ npm install
$ cd client/
$ npm install
$ cd ..
$ npm run dev

Front End Open your browser and visit http://127.0.0.1:3000

Back End http://127.0.0.1:3001

🖥️ Proxying API Requests in Development

Note: this feature is available with react-scripts@0.2.3 and higher.

People often serve the front-end React app from the same host and port as their backend implementation.
For example, a production setup might look like this after the app is deployed:

GET /           - static server returns ./client/build/index.html with React app

GET /api/token  - Generate token

POST /api/text  - Send text to receiver
content-type: application/json

{
    "token": "token",
    "textContent": "Text Content"
}

Such setup is not required. However, if you do have a setup like this, it is convenient to write requests like fetch('/api/token') without worrying about redirecting them to another host or port during development.

To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your ./client/package.json, for example:

  "proxy": "http://localhost:3001",

This way, when you fetch('/api/token') in development, the development server will recognize that it’s not a static asset, and will proxy your request to http://localhost:3001/api/token as a fallback. The development server will only attempt to send requests without text/html in its Accept header to the proxy.

Conveniently, this avoids CORS issues and error messages like this in development:

Fetch API cannot load http://localhost:3001/api/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Keep in mind that proxy only has effect in development (with npm start), and it is up to you to ensure that URLs like /api/token point to the right thing in production. You don’t have to use the /api prefix. Any unrecognized request without a text/html accept header will be redirected to the specified proxy.

The proxy option supports HTTP, HTTPS and WebSocket connections.
If the proxy option is not flexible enough for you, alternatively you can:

👏 Contributing

We welcome all contributions.You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, check out the Development Instructions and have a good time!

🎁 Donate

Support this application, to become dApps (Decentralized Applications)

Bitcoin :15kHKSH7JaRHWGTQmza3E8aomxT2g5D373

Ethereum :0xa9ac91a2546d9403a8efb873a3cac382d6271b93


Thank's ❤️

About

Build App Front End (ReactJs) and Back End (ExpressJs) - API implementation, styling with styled-component, connect QRcode and mores.

https://vaste-app.herokuapp.com/

License:MIT License


Languages

Language:JavaScript 88.3%Language:HTML 11.6%Language:CSS 0.1%