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.
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:
Webpack Dev Server: Proxy
Vue CLI Webpack Config
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.
Related
I'm have following (abstract) project structure:
src/brands
src/admin
src/home
Brands & admin are a pure vue project, home is a nuxt project. I'm trying to get the brands & admin project to run on their own subdomain (brands.website.com & admin.website.com, respectively), and home on the main domain. The deploy to production/staging happens via docker (with an nginx image), and I was thinking to just copy a nginx config file from my project to the docker image to point the files in the dist folder to the correct html file (not sure how yet, I need to research that first).
For development, I used vue.config.js (since I'm using v3 of the vue cli) and I have setup the following:
index: {
entry: 'src/index/main.js',
filename: 'index.html',
},
brands: {
entry: 'src/brands/main.js',
filename: 'brands/index.html',
},
admin: {
entry: 'src/admin/main.js',
filename: 'admin/index.html',
},
I can reach the brands module via localhost:8080/brands, admin module via localhost:8080/admin and the homepage via localhost:8080, but the problem is that on my index page I'm gonna have a route that is /brands, so that would probably overwrite the brands module route with the page from nuxt (or vice versa). Now is my question if there is a better way of doing this (for example to enable subdomains in vue / localhost) and if not, is the way I'm wanting to copy the nginx config to my docker image a good practice? Or not?
Thanks in advance!
I have a similar project architecture. I have a single repo with multiple vue/nuxt projects. Each of my projects is its own npm/webpack project and is accessed by subdomain when developing locally.
Based on your example, this is how I would setup the projects.
Modify your hosts file:
127.0.0.1 website.localhost brands.website.localhost admin.website.localhost
Using localhost as the TLD was my personal decision, feel free to name the domains anyway you like.
Configure webpack dev server to serve each project at the corresponding subdomain + port.
src/brands: https://brands.website.localhost:8080
src/admin: https://admin.website.localhost:8081
src/home: https://website.localhost:8082
Whats nice about this configuration is that your dev URLs match your production URLs. https://brands.website.localhost:8080 -> https://brands.website.com
Each project will have complete control over the domain's subpaths and won't clobber other project's routes, which you alluded to with the /brands route.
We're running an EmberCLI application in our infrastructure, and I'm tasked to make it work better with the rest of our services. One thing that's a bit interesting about EmberCLI is that all it's configuration variables are baked into the build by default. (Specifically in the <meta> tag).
I had trouble finding a way to supply runtime configuration. We have an "API_URL" environment variable that's supplied to all our services so they can find the API. What is the recommended way to supply this url to EmberCLI at run-time, so I can avoid a rebuild and have fully-built docker containers with our frontend application.
If you want to use an environment variable for configuration ember-cli-dotenv will help. It allows you to access an environment variable in config/enviroment.js:
// config/environment.js
module.exports = function(environment){
return {
apiUrl: process.env.API_URL
}
};
You have to whitelist the environment variables used in ember-cli-build.js:
// ember-cli-build.js
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
dotEnv: {
clientAllowedKeys: ['API_URL']
}
});
return app.toTree();
};
A short side note: Configuration variables are baked into the build by ember-cli cause ember-cli has done it's job after build. Files generated should be served by a normal webserver like nginx. The webserver which could be started with ember serve should not be used in production.
I am building an app using node.js + vue.js and was wondering if anyone knows how I can load environment variables into my vue.js components? Right now I'm loading environment variables in my server side code using the dotenv package but it doesn't seem to work for vue.js..
Thanks in advance!
You can expose environment variables from NodeJS like this:
console.log(process.env.EXAMPLE_VARIABLE);
More details on process.env: https://nodejs.org/api/process.html#process_process_env
To expose your environment variables to the client-side in Vue (or any Javascript framework for that matter), you could render a JSON response from NodeJS that is ingested via an AJAX call.
Using Vue Cli 3, You can load your environment variables like this
Create a .env file in the root directory of your application.
In the .env file, prefix your environment variables with VUE_APP_.
Example: VUE_APP_SECRET=SECRET.
Now you can access them with process.env.THE_NAME_OF_THE_VARIABLE in your application code.
Example: console.log(process.env.VUE_APP_SECRET) // SECRET
You can read more here
I am using ember-cli-mirage to serve for requests. As I have my rails api to serve those request, how i shd remove or uninstall ember-cli-mirage from my ember ?
If am removing mirage folder, am getting build error !!
You should leave Mirage installed (and the folder on disk) but disable the server whenever you want to use your actual backend API. This will let you use Mirage in selective environments, for example in testing.
By default, Mirage is disabled in production, and also in development when using the -proxy option.
To disable Mirage explicitly, you can set the enabled config option to false. For example, to always disable in development:
// config/environment.js
...
if (environment === 'development') {
ENV['ember-cli-mirage'] = {
enabled: false
};
}
Leave mirage installed, if you want to use your backend api just launch ember with
ember s --proxy http://localhost:8000
if api's are running on your machine on port 8000.
More info on mirage official site: http://www.ember-cli-mirage.com/docs/v0.3.x/configuration/#enabled
I have an action, that generates a PDF files and save it in the /public/output.pdf.
When I set
config.serve_static_assets = false
this file can't be found.
What's wrong ?
From the documentation:
"config.serve_static_assets configures Rails itself to serve static
assets. Defaults to true, but in the production environment is turned
off as the server software (e.g. Nginx or Apache) used to run the
application should serve static assets instead. Unlike the default
setting set this to true when running (absolutely not recommended!) or
testing your app in production mode using WEBrick. Otherwise you won´t
be able use page caching and requests for files that exist regularly
under the public directory will anyway hit your Rails app."
Which means that if you set that to false Rails will not serve any assets from your public folder as it is assumed that a front-end web server (apache/nginx) will handle it. This lessons the load on Rails as the front-end server is much, much more efficient at serving files directly.
After testing, I came to this conclusion:
1) when using the command
rails s -e production
Rails will only serve the statics files. Any other file created after you compile your assets will not be found.
To handle this, you need to execute your application under a web server like Apache, Nginx or other. These web servers will serve this files for you.
This looks to be obvious, but not for a beginner.