npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

syncano-cli

v0.55.0

Published

CLI for Syncano

Downloads

37

Readme

Quickstart Guide

A small teaser of what you will have build in a couple of minutes from now:

Teaser

Tutorial steps:

  1. Cloning an example repository with a simple front-end project (a chat app)
  2. Syncano CLI installation
  3. Signing up and creating a Syncano project
  4. Installing a Syncano Socket
  5. Configuring the front-end
  6. Deploying your application to the cloud

You can test the app live at this url: https://production--chat-app.syncano.site/

Clone the example repository

First git clone the sample Chat project by going to your terminal application and running:

git clone https://github.com/Syncano-Community/chat-app.git
cd chat-app

Install the Syncano CLI

In order to use the Syncano CLI you will have to install the following dependencies:

  • NodeJS greater than NODE
  • NPM greater than NPM
  • Yarn greater than Yarn

The syncano-cli is the main tool for setting up and managing your projects on the Syncano Platform. To install it, run:

npm install -g syncano-cli

Sign up and create a project

Once the Syncano CLI is installed you can sign up for an account. Run the following command in the root directory of your project:

syncano-cli init

You'll be asked for an email and password so that we can create an account for you. You'll also be prompted for a project template. Choose the recommended Hello World template and press enter.

syncano-cli init

Install a Syncano Socket

Now, we will install the chat socket from the Syncano Registry.

Sockets are modules that enclose a piece of functionality needed for your app. The difference is, that instead of functions they expose endpoints for communication with the server, and emit events so that integrations with other sockets are possible. You can find out more about the Sockets concept in the Sockets Overview section.

syncano-cli add chat

syncano-cli add chat

This command will add a chat Socket as a dependency of your project. It has everything that is needed for your chat application front-end to work. By now your chat-app project structure should look like this:

chat-project-structure

Run syncano-cli list chat to view the Socket documentation

To make sure it has been added correctly, you can open the /chat-app/syncano/syncano.yml and see if these lines are present:

The chat app Socket you installed may have a higher version number

dependencies:
  sockets:
    chat:
      version: 0.0.1

Configure your front-end

The only change you need to make in the code is in the ./web/index.html file. Open it and replace the INSTANCE_NAME with your Instance name in the 8th line:

Change instance name

To find out your Instance name you can run syncano-cli command. It will be printed as a Current Instance.

Deploy your project

Now it's time to deploy your app. To do this, run the following command:

syncano-cli hosting add ./web

Add hosting

Choose the defaults when prompted and type y and press enter when asked Do you want to sync files now?

Your web assets will be published under the url printed by the Syncano CLI. It should have this format: https://staging--<instance name>.syncano.site/. Go to this url to see the published project. Open the url in two tabs to experience the realtime in action.

Ok, but What has just happened!?

You have successfully configured and deployed a full stack, realtime chat application. Well done!

How did it happen? Here's a quick rundown:

  1. When running syncano-cli add chat you have connected to Syncano Registry which contains components that you can integrate into your app. Run syncano-cli search [term] to discover more Sockets.
  2. The chat Socket was added as a dependency in the syncano.yml file. All the dependencies installed from the Syncano Registry will be present in this file
  3. By providing the instance_name in the index.html you simply configure your web app to use your API. The Syncano Client library handles the rest.
  4. When running syncano-cli deploy chat, you tell Syncano to read from the socket.yml spec and, based on it, build your own API endpoints. The endpoints are available for use instantly after the deploy command is finished. To keep your local changes in sync with the Instance during development you can use the syncano-cli deploy --hot [socket-name] command
  5. syncano-cli hosting add is the last command. It publishes your static web assets from the web folder and hosts them on Syncano.

That's it! If you have any questions, log into our Slack and chat with the community. Happy coding!