Can I use Vue Js instead of React Js as frontend in custom app creation?

[Karan-Javiya]

I am using Shopify cli to create a custom App. For that, I follow Shopify documentation to create an app. Now While creating an app I choose node as the backend and It takes react as the frontend automatically and creates the app. Now I do not want react as frontend I want vue as frontend instead of react js. Can this possible? and if possible then please provide reference for that.

[Moeed]

Hey there!

Yes, it is possible to use Vue.js as the frontend for your custom Shopify app instead of React. While the default setup generated by the Shopify CLI includes React, you can modify it to use Vue.js.

To use Vue.js as the frontend for your Shopify app, you can follow these steps:

• After creating your app using the Shopify CLI, navigate to the app's directory.

• Remove the existing React files and dependencies from your project. You can delete the client folder, along with its contents.

• Install Vue.js and the necessary dependencies by running the following command in your project directory.

npm install vue vue-router

• Create a new client folder in your project directory. Inside the client folder, create a new main.js file, which will serve as the entry point for your Vue.js application.

• Write your Vue.js components and routes in separate files within the client folder. You can organize your components and routes according to your app's needs.

• Update the main.js file to import your Vue.js components, create the Vue instance, and mount it to the DOM. Here's a basic example:

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

• Customize the App.vue component to define the structure and layout of your app.

• Update the webpack.config.js file in your project to build and bundle your Vue.js code. You may need to configure the Vue loader and plugins specific to your setup.

• Update your backend code as needed to handle requests and communicate with the Shopify API.

• Run your app locally using the Shopify CLI by running shopify serve. This will start both the backend server and the Vue.js frontend.

Keep in mind that using Vue.js instead of React may require additional configurations and adjustments to your project structure. It's recommended to refer to the official Vue.js documentation and resources for detailed guidance on building Vue.js applications.

Additionally, you can find examples and tutorials on integrating Vue.js with Shopify by searching online or exploring community-supported projects on platforms like GitHub.

Remember to test your app thoroughly and ensure that all functionality works as expected.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Karan-Javiya]

I created And Connected App And It works in my dev alright. But when I
move my code to production Using Heroku as per shopify documentation at
that time when my app deployed. It crash with heroku error code H-10 App
crashed. Is there any other changes required to host app in heroku if I
am using Vue as frontend.

[Moeed]

When deploying a Shopify app with a Vue.js frontend to Heroku, there are a few additional steps and configurations you need to consider. Here are some possible solutions to address the H-10 App crashed error on Heroku:

1. Verify your build process: Ensure that your build process is correctly set up for deploying a Vue.js app to Heroku. This typically involves running the necessary build commands in your Heroku deployment script or in the project's build configuration. Double-check that your Vue.js app is built and bundled correctly before deploying it to Heroku.

2. Specify the production server host and port: In your Vue.js app's configuration, make sure that you specify the correct host and port for the production server. For Heroku, you'll likely need to configure the server to use the appropriate host and port provided by Heroku's environment variables. This ensures that your app runs on the correct address when deployed to Heroku.

3. Set up a proper server configuration: Ensure that you have a proper server configuration in place for hosting your app on Heroku. This typically involves configuring your server to handle incoming requests, serve the static files generated by your Vue.js app, and correctly proxy requests to your backend API. Check that your server configuration is properly set up to handle the specific requirements of your Vue.js app and integrate with your backend.

4. Debug the error logs: To get more insight into why your app is crashing, check the error logs provided by Heroku. These logs can help you identify any specific issues or errors that are causing the crash. Use Heroku's CLI or the Heroku Dashboard to access the logs and look for any relevant error messages or stack traces. This can give you valuable information about the underlying cause of the crash.

5. Ensure proper environment variable setup: Make sure that you have set up all necessary environment variables required for your app to function correctly in the production environment. These variables might include API keys, database credentials, or any other configuration values needed by your app. Ensure that these variables are correctly configured in your Heroku environment.

6. Review your dependencies and versions: Verify that all dependencies and their versions specified in your project's package.json file are compatible and properly installed. In some cases, conflicts between dependencies or incorrect versions can lead to app crashes. Double-check your dependencies and ensure they are correctly set up for production deployment.

If the issue persists, it can be helpful to consult the specific error messages from Heroku's logs or seek assistance from the Heroku support team. They can provide more detailed guidance and help you troubleshoot the specific issue with your Vue.js app deployment on Heroku.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed