Rails Back-end and Vue Front-end on a same port

user_14113898 0
Viewed 328

I have this rails application which handles the backend for the app and I also have a Vue project in the root of the same directory acting as a front end. Now, the rails server runs on port:3000 and Vue runs on Port:8081 by default.

I need to make sure both communicate through a single port.

vue.js ruby-on-rails
1 Answers

If you are using webpack or the Vue CLI you can easily define a reverse proxy in the configuration of your front-end project. Here is an example of such a webpack config:

devServer: {
  proxy: {
    '/api': 'http://localhost:3000'
  }
}

When defining such a configuration, your front-end devserver will redirect each request from http://localhost:8081/api/* to http://localhost:3000/api/*. You can also define another pattern than /api depending on your needs.

In Vue CLI, you can use the same configuration and add it to the vue.config.js file. Make sure to add the webpackConfig into the section configureWebpack:

module.exports = {
  configureWebpack: {
     [...the config like above...]
  }
};

Here are some documentation references:

The above described configuration works for the development environment. The productive environment must be handled differently, because there is no webpack devserver in production. You need to build the static HTML/JS/CSS content with webpack and then either put the generated code into the Rails application and serve it from there statically or you use two web servers (one for Rails and one for serving the static files) and put a reverse proxy in front of them.

user_32338270
Related